javascripter です。ハローでは、初期メンバーとしてプロダクトのローンチ前からAutoReserve の開発に関わっています。 前回の記事に引き続き、筆者が社内で書いている技術ガイドラインについて紹介します。 はじめに ハローでは、高品質なコードを維持し、開発チームの技術レベル向上を図るため、チーム横断的に、有用な技術Tips、ベストプラクティス・コーディングガイドラインなど情報をNotion上に集約し、自由にエンジニアが閲覧・編集できるようになっています。 この取り組みの目的は以下の通りです： コード品質の向上と統一 開発チームメンバーの技術スキル向上 「どう」直すかでではなく「なぜ」そう修正すべきかまで理解してる人を増やす 効率的な開発プロセスの確立 前回の記事については、こちらを参照下さい。 Reactベストプラクティス: react-hooks/exhaustive-de
先日、Next.jsのISR（Incremental Static Regeneration）について書きました。 ISRは非常に強力な機能なのですが、セルフホスティングでNext.jsを動かす場合には色々と使うのが難しかったりします。この記事ではその理由とCDNを使ってISRと似たような挙動を実現する方法を紹介します。 Next.jsのISRをVercel以外で動かすのは難しい Vercelは自社でメンテナンスしているNext.jsを簡単にデプロイできることを大きな強みとしています。Vercelにデプロイする場合、ソースコード上で決められた書き方さえすれば、Vercel側の追加設定なしでISRを利用できます。 しかし、Vercel以外のプラットフォームにデプロイするとなると途端に話がややこしくなります。 Next.jsのISRはキャッシュしたHTMLをファイルシステムに書き込む仕様になっ
Cloudflare Pages + Functions + Workers KV + vite + preactで簡単なページを作った
今回作ったページは下記。 https://haropuro-shuffle.pages.dev/ 元ネタ リポジトリ YuheiNakasaka/haropuro-shuffle 簡単なルーレットアプリ。ルーレットで出た結果をWorkers KVに保存。保存された文字を都度更新して表示(リアルタイムではない)。結果が1000件を超えるとクリアされる。 開発の流れ Workers KVの設定 vite + preactのアプリ開発 Cloudflare Pages/Functionsにデプロイ Workers KVの設定 Workers KVとは PagesやFunctionsから呼び出せるKey-Valuesストア。ここ見るとわかるけど容量制限など結構厳しいのでDBとして本格的に使える感じではない。 設定方法 まずGUIからだとWorkersのページからnamespace(database
はじめに タイトルで大袈裟にZero API Web Applicationという名前をつけてしまいましたが、要するにNext.jsのversion13.4のServer ActionとReact Server Componentを活用してAPIを作らない・叩かないWeb Applicationを開発するというものです。 今回は趣味で作った麻雀のゲームを例に、Next.js@13.4でAPI要らずなアプリケーション開発及び、開発で得た知見を紹介できたらと思います。 補足ですが、今回開発したアプリケーションの概要としては、麻雀のさまざまな局面に応じて「あなたならどの牌を切る？」というアンケート型のゲームです。 話すこと 今回以下の二点に絞って知見を共有できたらと思います。 RSCとserver actionsでZero APIの実現 ファイルベースのOGP・favicon 成果物とその構成
Cloudflare Workers + Hono ワークショップ - ServerlessDays Tokyo 2023
Cloudflare Workers + Hono ワークショップ 資料はこちら => workshops.yusuke.run #serverlessdays Yusuke Wada 2023-09-24 ServerlessDays Tokyo 2023 workshops.yusuke.run アジェンダ ワークショップについて Workers イントロダクション Hono イントロダクション 基本編 プロキシ編 Web API編 フルスタック編 AI編 Honoをより深く知る その他 1. ワークショップについて 1.1 対象 対象者 Cloudflareでのアプリケーション作成に興味のある方 Honoを使ってみたい方 フロント、バックエンド問いません 前提条件 Wranglerが動く環境をつくっておく npx wrangler が動く JavaScriptに対する知識があるとよい
Translations: Korean Russian I was a bit out of touch with modern front-end development. I also remembered articles about web bloat, how the average web page size was approaching several megabytes! So all this time I was living under impression that, for example, if the average web page size is 3 MB, then JavaScript bundle should be around 1 MB. Surely content should still take the majority, no? W
こんにちは、asatoです。 あるスクラムチームの話です。とりとめもなく、そんなチームで起こったことを書き連ねていきます。 Table of Contents 【スタート】エンジニアとQAEの間には壁がありました 【1ヶ月目】DoDを作成しました 【2ヶ月目】スプリント中にテストを完了できる方法を探しました、が見つかりませんでした。 【4ヶ月目】QAEもテスト環境構築ができるようになりました 【5ヶ月目】スプリント内でテストが完了するようになってきたのでDoDを更新しました 【6ヶ月目】QAEみんなでAgile Testing Condencedを読み始めました 【6ヶ月目】Engineerもテストするようになりました 【7ヶ月目】QAEも見積もりに参加するようになりました 【7ヶ月目】QAEもスプリントレビューでインクリメントをお披露目するようになりました 【7ヶ月目】開発者全員で探索的
Web APIのパフォーマンス向上に「Dynamic Content Storing = DCS」という戦略を考えている。 Web APIに限らず、サーバーサイドで動的に作られるコンテンツ全てへ適応できるものである。 本番環境で運用したわけではないが、実際に動くモックを作ってみた。 背景とともに紹介しよう。 要点 「Dynamic Content Storing」とは「動的コンテンツをエッジのkey-valueストアに保存する」ことを言う。 ユーザーには（初回以外）KVストアから取得したコンテンツを返す。 有効期限もしくはコンテンツの更新をトリガーに新しくコンテンツを生成する。 どんなバックエンドにも適応できる「Incremental Static Regeneration」と考えることができる。 原理は「Stale-While-Revalidate」と同じだがこの場合はコンテンツがより永
Deno の話 @ Nikkei
class: middle, center <img src="./assets/logo.svg" align="center" width="200" /> Deno の話 --- アジェンダ - Deno とは - Deno の各種特徴 - Deno Deploy の紹介 --- # 話す人 <img src="./assets/hinosawa.jpg" align="right" width="300" /> 日野澤歓也 twitter @kt3k - GREE (2012 - 2013) - Recruit (2015 - 2019) - Deno Land (2021 -) <small>2018年から Deno にコントリビュートを開始。2020年作者に誘われ Deno Land に転職。現在はフルタイムで Deno と Deno Deploy を開発中。</small>
はじめに 個人開発で使っていたのですが Gopher の集いにて Vercel で Go の開発ができることを話したら意外と知られていなかったのでご紹介します。 （貧乏エンジニアリングだと言って似たような記事を以前お見かけしていた場合、それはきっと私の残像が書いたものです。） Vercel とは いわゆる PaaS ( Platform as a Service ) です。 Vercel 社が Next.js を開発していることもあり、静的サイトや SPA ホスティングを簡単にできるサービスの印象が強いですが、 Functions や Postgres などを備えているのでサーバーの構築もできちゃいます。 Next.js のイメージから TypeScript と思われますが Go もデプロイできます。 準備 & version Vercel アカウントを作成します。 無料で使いたいので H
筑波大学学園祭 Web サイト構築の舞台裏
年の瀬ですね。こんにちは、いなにわうどん（@kyoto_mast21）です。 11 月 5, 6 日に、筑波大学では雙峰祭（そうほうさい）と呼ばれる学園祭が開催されました。私は雙峰祭 Web サイトのフロントエンドのデザインや実装を主に担当したので、その工夫や裏話的なものを少しお話しできればと思います。 Web サイトの開発光景 本稿は 学園祭非公式 Advent Calendar 2022 の 14 日目の記事です。12 日目の担当は issy さんでした[1]。 背景 学園祭の運営を担う筑波大学学園祭実行委員会には、情報メディアシステム局[2]（以下、jsys）と呼ばれる部門が存在しています。jsys では、学園祭で使用する映像の制作・生中継[3]等に加え、学園祭運営に必要な各種システムや Web サイトの内製を担当しています。 例年、雙峰祭の前後 1 ヶ月程度は、その年のテーマに合わ
JSConf JP 2023「書いたJavaScriptがそのままブラウザで動く未来へ」スピーカーノート
この記事は、JSConf JP 2023 で発表した「書いたJavaScriptがそのままブラウザで動く未来へ」のスピーカーノートです。もともと PDF を公開していたのですが、読みにくいという声をいただいたので移植しました。内容はそのままで、見出しだけ付けています。 はじまり こんにちは、今日は「書いたJavaScriptがそのままブラウザで動く未来へ」というタイトルで発表をします。「いやいや、JavaScriptはブラウザで普通に動くだろう」と思われる方もいらっしゃるかもしれませんが、話を聞いてもらえれば何を言っているのかわかると思います。 JSConf JPで登壇させていただくのは今回で3度目なのですが、オフラインのカンファレンスで話すのは今回がはじめてなので少々緊張しています。 最初に軽く自己紹介をします。鈴木 颯介と言います。大体のところで Sosuke Suzuki という名前
State of React 2023
React has been around for 11 years, which seems hard to even grasp when you look at the current pace of web development. The reason why we're still talking about React today is that it's somehow been able to keep up, always evolving to meet the challenges thrown at it by its users. In fact, not content with merely keeping up, React is even leading the way on new innovative patterns such as Server
Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~
Next.jsにはIncremental Static Regeneration（以降: ISR）というレンダリングの仕組みが存在します。ところがこれを利用するにはVercel上でNext.jsを使用しないと完璧な動作をしないことは知られています。ですが、このISRの仕組みは従来のSSRよりサーバの処理コストはもちろん、キャッシュという仕組み上レスポンスにも非常に効果のあるものです。 今回はこのISRを独自に構築するための技術を記事として起こしていきます。 本記事の続きとなるものはこちらに記載しておりますので、合わせて御覧ください。 【前提条件】 ISRが何という説明は本記事では行いません。 システム構成上、1記事ですべてを説明するにはボリュームが大きいので複数記事に分けさせて頂きます。 本記事で詳細するシステム構成には一部成約が存在します。 使用するNext.jsもしくはそれに準ずるもの
優れたチャットAIがいろいろと出てきていて、ノートPCでも実行可能な「GPT4ALL」のように、のように、ハードウェアのスペックをそこまで求めないものも出てきました。しかし、その際には数GBのデータをDLする必要があるなど、使用自体は手軽でも導入はそこまで容易ではありません。オープンソースの「YakGPT」は「シンプルかつローカルで動くChatGPTのUI」を名乗るとおり、特別なアプリの導入は一切必要なく、ブラウザとOpenAIのAPIキーがあればチャットAIを利用できます。 YakGPT https://yakgpt.vercel.app/ YakGPTにアクセスするとこんな画面が表示されます。まずは利用するにあたって「Enter API Key」をクリック。 Open AIのAPIキー入力画面になります。すでにAPIキーを手元に持っている人は入力してください。今回はAPIキーを発行する
The React ecosystem is a bustling landscape, brimming with frameworks promising to revolutionize web development. Today, we’ll be diving into two popular contenders: Next.js and Remix. Next.js is one of the most popular React frameworks used for server-side rendering. It’s been there for a significant time, and it provides an exceptional developer experience with all the features developers need.
はじめに 完全に釣りタイトルです。Three.js などを使わずに生の WebGL で ▲ を描くというだけの話です。いわゆる WebGL の「Hello World」です。Vercel や Next.js とは一切関係ありません。 WebGL を詳細に解説しているサイトはいくつかあって、内容に関してはどれもすばらしいものです。ただ、何年も前のものなのでソースコードにまだ var が使われているものも多く、また独自関数で処理をまとめていることで、個人的には全体の流れが少しわかりにくくなっている気がします。さらに TypeScript を使っている日本語記事は見当たりませんでしたので、それらを補う形でまとめてみたいと思います。 なお、本記事では全体的な流れに焦点を当てているので、詳細な解説は下記サイトなどをご参考ください。 WebGLの基本 (日本語) wgld.org | WebGL (日
はじめに Webシステムの開発に携わりたくて転職して9か月，知らない事ばかりで日々勉強しております。 自分の勉強用メモとして知っておくべき技術をまとめようと思いました。 (こちらの記事にインスパイアされたものです) 技術用語について，なるべく2～3行で概要を説明できる事を目指しています。 情報が多過ぎるので，主流な技術は見出しを赤字にしています。(主観強め) また，今後需要が増えそうな技術は青字にしています。(かなり主観強め) とはいえ，新しい技術が登場すれば，数年でトレンドが変わってしまう事も多々あると思います。 ほとんどはあくまでも初心者がネットで情報をかき集めた程度のものです。 誤りがあればご指摘，ご意見など頂きたいです。 ※2023/2/6追記 不正確・不十分だと思った記載はひっそりと随時修正しています。 また，「そういえばこんなんあったな」という項目も追記しています。 あと，自分
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ
JAMスタックのNetlify、静的サイトジェネレータ開発元のGatsby買収を発表。Webサイトホスティングサービス強化へ Webサイトのホスティングサービスを提供するNetlifyは、静的サイトジェネレータGatsby.jsの開発元であり、GatsbyをベースにしたWebサイトホスティングサービスを提供しているGatsbyの買収を発表しました（Netlifyの発表、Gatsbyの発表）。 We’re thrilled to announce that we have acquired Gatsby Inc.! Together we will build the future of composable, and empower developers with flexibility and choice in building composable web experiences.
Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。
制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React
はじめに この記事では、フロントエンドのレンダリングパターンの 1 つである Islands Architecture について概略した上で、Astro における Islands Architecture の実現方法をチュートリアル的に解説します。Astro は 2022 年の 8 月に v1 がリリースされたばかりの UI フレームワークであり、ユーザーもまだそれほど多くはないと思われるため、なるべく前提知識がない方でも理解できるように各ステップの説明を細かく噛み砕いておこなうつもりです。また最後に補論として、Astro v2 について本論と絡めて簡単に紹介します。 Astro と Islands Architecture Astro は、高いパフォーマンスを実現するウェブサイトをモダンな DX (Developer Experience) のもとで開発することを目指した UI フレーム
みなさん初めまして！ 株式会社ゆめみでサーバーサイドエンジニアとして働いている、りょーきです！！ 最近、エンジニア向けのイベントの登壇資料を作成している中で、 「この技術の公式ロゴ、どこにあるねん！！！！」と何度も思ったので、 よく使うプログラミング言語やクラウドサービスなど、とにかく公式ロゴがあるかどうか調査して、集めてみました。 発表用資料作ってるけど、 なるべく公式のロゴを使用したい ロゴ探しに時間を費やしたくない そもそもどれが公式のロゴか分からない 上記のような方の参考になれば幸いです。 自分がよく使う・馴染みがある技術に偏ってしまっているので 「この技術もよく使うから記載してほしい！」といった要望や 「URL間違い・公式ロゴ存在するよ！｜しないよ！」などの指摘があれば、 どんどんコメントで教えてください！！ この記事では、公式のロゴがある場合は「公式」、無いまたは見つけられなか
SWR is a React Hooks library for data fetching. The name “SWR” is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861. SWR first returns the data from cache (stale), then sends the request (revalidate), and finally comes with the up-to-date data again. With just one hook, you can significantly simplify the data fetching logic in your project. And it also
GitHub - taubyte/tau: Open source distributed Platform as a Service (PaaS). A self-hosted Vercel / Netlify / Cloudflare alternative.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Next.js 10
We are excited to introduce Next.js 10, featuring: Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component Internationalized Routing: Start internationalizing your Next.js applications with built-in primitives Next.js Analytics: Measure and act on real user performance Next.js Commerce: An all-in-one starter kit for high-performan
前回の見取り図記事でスコープ外にした用語について、です。 書かなくてもいいかとも思ったんですが、思ったより前回記事が読まれたので、補足的に書こうと思います。 具体的に何を扱うかは、目次を見てください。 ビルドとデプロイ ビルドとデプロイの違いはなんでしょう？ 開発環境によって微妙に差異があって、業界標準でこう、と決まってるわけではないんでしょうけど、一般的には下記を指すと僕は認識しています。 ビルド: ソースコードのコンパイル、関連ファイルの紐付けを行い、実行可能な状態にする デプロイ: ビルドして、ユーザーから実行可能な状態にする デプロイは自分以外のユーザーが実行できる環境でのビルド、と言ってもいいかもですね。 デプロイ環境（Vercel, Netlify, Heroku） で、Webサイトのデプロイ環境について。 かつては自分でサーバーサイドのミドルウェアをセットアップする必要があり
Github Actionsで簡単にPuppeteerを使えるaction-puppeteer-scriptを作りました - The Third Law
maku693です。 Github ActionsでPuppeteerを簡単に使えるCustom Actionを作りました。 github.com 最近Github Actions上でブラウザを動かしたくなったのですが、いちいち実行環境を整えるのも面倒なので、サクッとできないものかと調べたところ、意外とPuppeteerをそのまま使えるactionというのは存在しないようだったので、自分で作りました。 使い方はREADMEに書いてありますが、ここでも軽く紹介します。 以下のjobでは、ページのタイトルを取ってきて、それを後続のstepで利用しています。 - id: get-title uses: maku693/action-puppeteer-script@v0 with: script: | const page = await browser.newPage(); await pag
アカウント名はウェブサービスにおける名前のようなもので、複数のサービスで同一のアカウント名を使用したいと思っている人も多いはず。そんな時に役立つのが、複数サービスで同一のアカウント名が使えるか検索できる「namae」で、唯一無二のアカウント名を手軽に探し出すことが可能です。 namae — 唯一無二の名前を見つける https://namae.dev/ 「namae」上では、ドメイン・Github Organization・GitLab・npm・Rust・PyPI・RubyGems・OCaml・Homebrew・Linux・Twitter・Instagram・Spectrum・Slack・Heroku・Vercel・Netlify・AWS S3・Firebase・js.org・Githubリポジトリ・App Storeでアカウント名が使用されているかどうかを確認できます。また、法人名として
https://serverless-frontend.connpass.com/event/279964/
『SOZAI』というフリー素材サイトをリリースしました!!
はじめに この度フリー素材サイト『SOZAI』をリリースしました!! この記事では開発の経緯や使用技術について触れていこうと思います。 ▼ サイトリンク また、イラストのリクエストもお待ちしております!! 開発の経緯 このサイトを開発するきっかけは大きく二つありました。 きっかけ① 最近、私は「なぜこのAI時代にフリー素材サイトは使われているのか」という疑問がありました。今の時代、Stable DiffusionやDALL-E、Midjourneyを使えば簡単にものの数秒で好きなイラストが生成できます。 思い通りの画像にならない しかし、実際やってみるとわかるのですが、AIはなかなか思い通りの画像を生成してくれません。イメージに近いものはできても、タッチが違ったり、背景に変なものが描かれていたりします。もちろん、私のプロンプトが悪いのかもしれませんが、AIを使いこなすのは簡単ではありません
SWR v2 をリリースしました
メンテナとして関わっていた SWR v2 がリリースされましたので紹介したいと思います。 各機能の細かい紹介については、リリースブログを確認してください。日本語翻訳も行ったので日本語で読むこともできます。 https://swr.vercel.app/ja/blog/swr-v2 ここでは、ざっくりと補足を書きたいと思います。 Mutation 周り useSWRMutation 一番わかりやすいのは、新しい useSWRMutation という Hook が追加されたことです。swr/mutation から import できます。 import useSWRMutation from 'swr/mutation' async function sendRequest(url, { arg }) { return fetch(url, { method: 'POST', body: JS
速さはDX - ゆーすけべー日記
「速さはDX」 日本語がおかしいですが、ようは「速いことはDeveloper Experienceの向上につながる」という意味です。 それについて書きます。 Bun 「速さはDX」という標語はBunの作者のJarred Sumnerが似た趣旨のことをひたすらXでつぶやいていたのをみて思いつきました。 以下のそのひとつです。 performance is mostly about DX. Waiting for things costs time & focus — Jarred Sumner (@jarredsumner) September 4, 2023 そう、誰だって「待ちたくない」です。 Bunのv1.0が出る前後にBunを使うユースケースとして「パッケージインストールするのにbun installが速いからCIでそこだけ使う」というものがありました。 Bunの使い道、パッケージイ
次世代バンドルツールの競争の今 Turbopack vs Vite - GMOインターネットグループ グループ研究開発本部
こんにちは。グループ研究開発本部 次世代システム研究室のH.Oです。 生産的なアプリケーション開発において欠かせないものの一つにフロントエンドのJavaScriptバンドルツールがあります。 これまで、長年に渡ってJavaScriptのバンドルツールはwebpackがデファクトスタンダードとなり、Next.jsやNuxt.jsなどフレームワークにもデフォルトで組み込まれていました。その高機能性と安定性から現在も多くのWebサービスで利用されています。 一方で近年、webpackに続く次世代バンドルツールの開発競争が大きな注目を集めています。その中で特にwebpackに取って代わる勢いを見せているものにViteとTurbopackがあります。これらは、開発するアプリケーションの肥大化に伴って処理が遅くなってしまうwebpackの問題点を解決することが主要目的となっています。 今回はViteと
Cron job editor: multiple cron jobs, calendar view, AWS & Vercel cron support | CronTool
Debug, view, edit & learn cron expression syntax.Become a cron expert and enable a world of possibilities. Cron is a tool for scheduling repetitive tasks on Unix-like systems. It allows users to schedule commands or scripts to run at specific times, dates, or intervals. This can be used for automating system maintenance or administration, but it can also be used for other purposes such as regularl
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro） - Qiita
ファビコンを環境ごとに変えると分かりやすい（Next.js, Vue3, SvelteKit, Astro）faviconVue.jsastroNext.jsSvelteKit 「開発環境」「プロダクション環境」などごとにファビコンを変えておくと、パッと見てわかりやすい 絵文字をファビコンに設定できる Next.js, Vue3, SvelteKit, Astro での実例を紹介した そもそもFavicon（ファビコン）って？ ウェブページのアイコンです。ブラウザでページを開いたときに、タブなどに表示されていたりします: Favicon - Wikipedia File:Wikipedia favicon in Firefox on KDE (2023).png - Wikipedia ファビコンの設定方法 pngなどの画像や、SVGファイルを用意して、それをHTMLのhead内で指定しま
GitHub - vercel/server-components-notes-demo: Experimental demo of React Server Components with Next.js. Deployed serverlessly on Vercel.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
はじめに おはようございます、加藤です。現在AWSには223個（2022/01/05時点）のサービスがあります。コンピューティングのカテゴリだけでも10数個のサービスが存在し、WebアプリケーションをAWS上に構築するエンジニアは要件に応じて利用するサービスを選定しアーキテクチャを決定しなければなりません。 動くだけならばともかくアジリティ・スケーラビリティ・コストパフォーマンスを高水準で満たすアーキテクチャを設計するにはスペシャリストの存在が必要不可欠です。プロジェクトチーム内にスペシャルが存在しない場合は多くの会社がAWSのコンサルティングサービスを提供しているので外注で解決する事ができます。（もちろん、弊社もAWSコンサルティングサービスを提供しております、お気軽にお問い合わせください！） しかし、コスト・スケジュール・組織的な都合で外注が出来ないことやまずはノウハウを蓄積するために
ブログを作りながら学ぶ、Next.jsの便利な5つのコンポーネント（Link、Image、Head、Script、レイアウト）
この連載では、現在注目のWebホスティングサービス「Vercel」をご紹介します。本記事から2回にわたって、「Next.js」の便利な9つの機能をご紹介します。今回は、「Linkコンポーネント」「Imageコンポーネント」「Headコンポーネント」「Scriptコンポーネント」「レイアウトコンポーネント」の5つのコンポーネントを紹介します。 はじめに 前回はNext.jsアプリケーションをVercelにデプロイする方法や、一緒に活用する利点などを紹介しました。今回から2回にわたって、Next.jsの便利な機能を紹介しながら、簡単なブログを表示するアプリを作成していきます。 この記事は既になんらかのプログラミング言語やWebフレームワークを学習した経験がある人向けに書いています。サンプルコードを提供しますので、サンプルコードを実際に動かしていただくことでより理解が深まると考えています。 自身
TechCrunch
“When an investor passes on you, they will not tell you the real reason,” said Tom Blomfield, group partner at Y Combinator. “At seed stage, frankly, no one knows what’s going
まえがき コロナの影響で食生活がおうち中心になり、どうしても カップラーメン or カップ焼きそば を食べる機会が増えました。 そのなかで、どれぐらい今食べているのかを把握することは大切（健康のために）かと思い、この自分しか得をしないサイトを構築してみました。 こんなことに結構な工数とお金を使った気がしますが、いったん気にしないことにしてます。 これで、栄養や健康について意識するようになっていけると思います。（いいぞ！） アーキテクチャの構想 Next.js（SSG） microCMS（ヘッドレスCMS） MESH（IoT） Github Actions（JAMStack build） Slack（通知用） お名前.com（ドメイン） AWS S3（ファイル配置） CloudFront（ファイルの配置とドメインを紐づけ） Lambda@edge（Edge側にいる JavaScript） A
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Reactベストプラクティス2: SWRを正しく使うには - Hello Tech
stale-while-revalidate対応のCDNでISRのような挙動を実現する
【PHPと一緒だなんて言わないで】Next.js@13.4によるZero API Web Application
JavaScript Bloat in 2024
エンジニアとQAEの壁が崩れていくのを眺めていた | at-blog
動的コンテツをエッジのKVにキャッシュする - ゆーすけべー日記
Vercel に Go サーバーを無料でデプロイできるんです！
ブラウザのみでさくさく動作するオープンソースな豪華版ChatGPT「YakGPT」、公式UIより高速で音声入力も可能
Next.js vs. Remix - A Developer's Dilemma
生 WebGL と TypeScript で Vercel のロゴを作る
Webシステム開発で関わる技術のまとめ(2022年に知った物) - Qiita
Astro で Islands Architecture を始めよう
よく使う技術・サービスの公式ロゴのURLをまとめてみた！ - Qiita
GitHub - vercel/swr: React Hooks for Data Fetching
Webフロントエンドの見取り図で書ききれなかった用語について書きます
複数サービスを横断して唯一無二のアカウント名が探せる「namae」
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
AWSアーキテクチャ for beginner（Webアプリケーション・コンピューティング編）
Next.jsとmicroCMSでカップラーメン食べた回数カウンターを作る