Image コンポーネントの特徴Next.js が提供している Image コンポーネント (next/image) を使用すると、image 要素をそのまま配置するのに比べて次のような恩恵を受けられます。 遅延ロード (Lazy loading)Web ブラウザでその画像がビューポート内（画面内）に入って来たときに初めてダウンロードされるようになります。大きなページの末尾部分に配置された画像が、無駄にダウンロードされてしまうのを防ぐことができます。画像の最適化アクセスしてきたクライアントに応じて画像ファイルを最適化して配信します。例えば、圧縮効率のよい WebP フォーマットなどに変換してくれます。リクエスト時にサーバーサイドでオンデマンドで最適化するため、Image コンポーネントを使うことでビルド時間が伸びてしまうことはありません。外部サーバーの画像を間接的に表示する場合も最適化でき
Yarn
Rails 6.1対応版: APIモードのRailsに対してCrossOriginなSPAからSession認証する方法 - Qiita
本記事では、APIモードのRailsに対してCrossOriginなSPAからSession(Cookie)認証する方法を解説します。 モダンなフロントエンド開発だと、Auth0やFirebaseを使った認証例が多く見られますが、バックエンドにRailsを使った認証例はまだまだ少ないと感じています。 JWT認証ではなくCookie認証となると、その数はさらに少ないようです。 実際にやってみるといろいろな障壁があることがわかったので、やるべきことをまとめることにしました。 背景 Next.jsアプリをVercelに、データ永続化とユーザ認証を目的としたAPIモードのRailsアプリをHerokuにデプロイしています。 この状況でNext.jsアプリからRailsに対して認証を試みると、CrossOriginなリクエストであるが故に様々な障壁があります。 本記事に記載する内容はバックエンド側が
GraphQL is stepping in to the 6th year in 2021 and is seeing great adoption in the developer community. We have compiled a short list of 5 best resources (in no particular order) specifically catering to Next.js developers, since it's one of the most popular frontend frameworks in the community. The list broadly focusses on the categories like GraphQL clients, data fetching, authentication, API ro
この記事は Next.js アドベントカレンダー 2019 の 7 日目の記事です。 はじめに Chrome Dev Summit 2019 に参加してきたのですが、その中で Google が Next.js を手厚くサポートしているという話があり、特にビルドと配信について興味深かったのでかいつまんで紹介します。 なお該当の動画は以下にあります。13分あたりから Next.js についての話になります。 https://developer.chrome.com/devsummit/sessions/advancing-the-web-framework-ecosystem/ 現在の JS のビルドと更なる最適化 現在の JavaScript のビルドでは、 Webpack + Babel を使用しているフレームワークが多くあるかと思います。 そして ES2015+ や TypeScript
業務にて Cloud Run内でNext.jsアプリを動かすことになった。 その時イメージサイズについて四苦八苦した結果、ある程度の最適化ができたのでその時の検証結果をここに記しておく。 準備編：イメージサイズ検証のためのアプリケーション yarn create next-app コマンドのオプションを設定することにより、Docker内で動作するサンプリアプリケーションのテンプレートを作ることが可能なので今回はそれを利用して検証してみる。 以下のコマンドで nextjs-docker というアプリケーションが作られる。 $ yarn create next-app --example with-docker nextjs-docker ... $ cd nextjs-docker ＄ yarn dev yarn run v1.22.19 $ next dev ready - started
リポジトリのセットアップ GitHubにプライベートでリポジトリを作成します。私はamplify-ssr-tutorialという名前で作成しました。 Note: It is recommended to run this command from the root of your app directory ? Enter a name for the project amplifyssrtutorial ? Enter a name for the environment dev ? Choose your default editor: IntelliJ IDEA ? Choose the type of app that you're building javascript Please tell us about your project ? What javascript fra
Next.jsを利用したプロジェクトを久しぶりに始めたいので、Next.jsのリソース調査をしてみました。 ライブラリ・プラグイン next-routes そこそこ複雑なルーティング対応する時に便利 https://github.com/fridays/next-routes next-seo SEO対策として便利 OpenGraphやJSON-LDに対応、説明も詳しい https://github.com/garmeeh/next-seo#readme next-offline offline対応用ライブラリ https://github.com/hanford/next-offline next-auth https://github.com/iaincollins/next-auth 認証関係のライブラリ nookies https://github.com/maticzav/noo
Introduction AWS Amplify is a set of purpose-built tools and features that lets front-end web and mobile developers quickly and easily build full-stack applications on AWS. In this post, we'll convert Figma components to React components with Amplify studio and use it in our application. View the source code on Github Prerequisites The following are required to follow along in this post: Basic kno
Next.jsとHono RPCで安全・爆速開発
AVベースはNext.js（Pages Router）のモノリスで作っています。画面から呼び出すAPIには Next.js の API Routes を使っています。API RoutesはHTTPメソッドを自分でハンドルする必要があったり、エラーハンドリングを各ファイルごとに行う必要があったりと、そのまま使うにはあまり便利ではありません。 そこでAPI RoutesでHonoを使うことにしました。Honoは高速かつ様々なランタイムで動作することで人気ですが、型推論を利用した RPC 機能も搭載しています。RPCによってサーバー・クライアント間の型が接続されたことで、画像のような快適な開発が可能になりました 左がサーバー側、右がクライアント側のコード。サーバー側のリファクタリングがクライアントにも反映される様子（リクエスト・レスポンスともに message というフィールドを text に置
今回はフルマネージドなサーバーレスRDBである、PlanetScaleをNext.jsで作成したアプリケーションから使ってみたいと思います 西田@MADグループです 今回はフルマネージドなサーバーレスRDBである、 PlanetScale を Next.js で作成したアプリケーションから使ってみたいと思います なお、この記事で作成するアプリケーションのソースコードはこちらのリポジトリにアップロードしてます PlanetScale とは？ PlnetScale は MySQL互換のサーバーレスデーターベースです シームレスに水平スケーリングでき、その裏側として Vitess が採用されています Vitess は Youtube や Slack でも採用された実績があるオープンソースデータベースです PlanetScale の主な特徴 設定なしで水平スケールが可能で、大規模なデータやトラフィ
PWA(Progressive Web App)とは？ PWAとは、新しいウェブ API と伝統的なプログレッシブな拡張戦略を使用し、クロスプラットフォームのウェブアプリケーションにネイティブアプリと同様の使い勝手をもたらすウェブアプリのことです。 簡単に言ってしまうと、ウェブアプリでありながらネイティブアプリのように使用できるようにする機能です。 PWAは、通常のウェブアプリのように、HTML、CSS、Javascript等で構成されます。 また、下記のようなメリットがあります。 通常のウェブアプリよりも高速 インストール可能 どのブラウザでも動く オフラインでも閲覧可能 プッシュ通知を送れる・受け取れる これを用いられているウェブアプリを例としてご紹介すると、Twitterです。 PCのChrome上では検索ボックスの右側にPCに下矢印のマークが表示されます。 これをクリックすると、ポ
Next.js アプリ内での環境変数の振る舞いprocess.env の振る舞いNode.js の process.env による環境変数の参照が有効なのは、基本的には次のようなサーバーサイドで実行されるコード内のみです。 ビルド時あるいはアクセス時に呼び出される getStaticPaths や getStaticProps必ずアクセス時に呼び出される getServerSideProps必ずアクセス時に呼び出される API ルートのハンドラ関数 (handler)src/pages/sample.tsx export const getStaticProps: GetStaticProps<PageProps> = async context => { // このコードはビルド時に実行されるので環境変数を参照できる console.log(process.env.VAR_NAME) r
Next.jsとテストの話 - dachi
#アドベントカレンダー Next.js Advent Calendar 2019 8日目の記事です。 Scrapboxは使い勝手がよくてなんでも書きたくなってしまいますね、個人ブログが全く息をしていない・・・。 Next.js初心者な私がNext.jsでええ感じにテストできるように設定するために直面した問題や疑問などを書きます。 テスト関連のまとまった情報がなかったので今後もここに都度まとめていって便利なメモにしていく予定です。 Jestを入れたい Next.jsでテストしたーい！と思ってJestを入れようとしたらハマった話を書きます。 ts-jestとbabel-jestの役割の違いに気づかず、頭が混乱してしまいました。 Next.jsに限らずな問題ですがNext.js触ってる時にハマったところだったので書いておきます。 あと、当たり前ですがドキュメントはちゃんと読まないとダメですね (
Next.js Commerce https://nextjs.org/commerce Next.js Commerceの特徴 「Next.js Commerce」は、Next.js10の新機能として搭載されたECサイト向けのオールインワンスターターキットです。 https://github.com/vercel/commerce プロジェクト自体はまだ開発中ですが、デモサイトから完成度の高さを十分に感じられる。今後はBigCommerce（eコマース向けSaaS）との連携も強化され、支払いなどのバックエンドまでサポートされていく予定です。 Next.js CommercedでECサイトを構築する リポジトリはGitHub/GitLab/Bitbucketがサポートされ、クローン、デプロイ、サイトの立ち上げまでをワンストップで行ってくれます。 基本的につまるところはなく、手順通り進めて最
Next.js に Apollo Server を立てるまでの備忘録です。 npx create-next-appで Next.js を作成して TypeScript の設定まで完了している前提で書きます。 依存モジュールの追加 Apollo Server の micro（Vercel が開発している非同期 HTTP サーバー）インテグレーションであるapollo-server-microを依存に追加します。
【完全版】App Routerで最初に知っておくとよさそうな基礎を全部まとめてみた - らくらくエンジニア
✅App Routerは1フォルダ = 1ページのルーティング。 ✅フォルダの中にpage.jsを作るとページができる。 ✅ルーティング以外にも追加機能、廃止機能がある。
はじめに 昨日の記事はmizchiさんの2021年 は Fullstack Next.js 元年なので、有望な Next.js 系フレームワークを全部試したでした。 Svelte系には私個人としても興味があり、来年くらいには一度使ってみたいです。 本日の記事は、 SSRやSSG, ISRなどの盛り上がりを見せているNextjsにおいて多くの有用な記事が出ており勉強になる部分が多くあるのですが、一方でそれらをどう実装するのがよいのか、という点に関して論じている記事があまり多くはみられないと思ったため、 『公式はどう実装をしているのか』という観点から実装のプラクティスを学んでみようという記事です。 本編 Nextjsのversion10の発表に伴って紹介された、Next.js Commerceのソースコードの表示速度が爆速で、何かしら参考にできないかと思いましたので、本記事ではNextjsに関
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想
Next.js×TypeScript×microCMS×MantineUI×Netlifyでブログを作成したのでまとめと感想 はじめに この記事は、タイトルに記載の通りの技術スタックで趣味の芝生管理用のブログを作成したので、簡単にまとめと感想を書いておこうと思います。 実際のブログはこちら GitHubリポジトリはこちら（参考になった方は🌟をポチッと🙏） ブログ作成の動機 普段業務でNextjs(React)を触っているがSSRする必要がないアプリケーションということもあり、ファイルルーティングの機能くらいしか触っていなかったため、SSGやSSRの機能をちょっと触っておきたかったのと、最近流行りのJAMStack構成をmicroCMSを用いて経験しておきたかったという2点が主な動機です。 あと、勤めている会社でホームページを作り直す話があがっていたので、JAMStack構成を提案するた
vercel/next.js
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
ひょっとしたら、デザイナーさんの方で React や Next.js を使うのが難しいと感じる人がいらっしゃるかもしれません。そんな方におすすめなのが、Astro です。React を使わずに、ネイティブな JavaScript と、html と css だけで、フロントエンド開発を行うことができます。 静的サイトジェネレータである Astro は、フロントエンド開発の新しいフレームワークで、静的サイト生成(SSG)とサーバーサイドレンダリング(SSR)を効率的に組み合わせることが可能です。 Astro の特徴は多岐に渡りますが、特に注目すべきはそのパフォーマンスと開発者体験です。これは、Astro が「0-JS」の原則に基づいて構築されているからです。 「0-JS」の原則とは何かというと、フロントエンドで JavaScript のバンドルを全く必要としない、つまり最小限の JavaScr
更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） サンプルの場所 Next.js公式リポジトリのexamples内ディレクトリ はじめに Next.jsの公式サンプルは前回(2021年1月版)から9本増えて合計277本あります。新たに追加されたサンプルには(new)がついています。（2021/07/03) しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎) Next.jsで基礎的な内容を扱っているサンプル。 （公式） 公式ドキュメント で説明するのに使われているサンプル等。 ※
これから始める、Next.js 第1回 Next.jsとは Next.jsの特徴を簡単なデモを使って確認してみます。Reactをベースとし、用途に合わせSSRやSSGを組み合わせた柔軟なサイト書き出し機能を試してみましょう。 はじめに Next.jsは、Reactをベースとしたフレームワークです。アメリカに籍を置くVercel社によって管理されているOSSプロジェクトでもあります。 この記事の執筆時点では10.0.5が最新バージョンとなっています。 Vercel社は、Webサイトのデプロイ・ホスティングサービスとしての「Vercel」も会社と同じ名前で運営しており、Next.jsとVercelを合わせて利用することで簡単にハイパフォーマンスなWebサイトが作れるということを掲げています。 Vercel社は2016年にZEITという名前でスタートして、ホスティングサービスのnowを運営してい
Next.jsでCMSにMDX形式で登録したコンテンツを利用する ―next-mdx-remoteの使い方― - あなたとあなたの話がしたい
Jamstackな構成では、CMSにどのような形式でコンテンツを登録するかが関心になって来るかと思う。 Markdownを採用する場合は、remark-reactやremark-htmlを使ってMarkdownをHTMLに変換できる。 ただ、実際にはMarkdownだと機能的に足りない部分が出て来そうで、MDXという、MarkdownにJSX（Reactコンポーネント）を埋め込める形式を利用すると捗る。 しかしこのMDX、CMSのような外部コンテンツとして登録する場合はどう使えば良いんだ？と思ったら、Next.jsの場合、next-mdx-remoteという便利なライブラリがあった。 next-mdx-remoteの使い方 例として、Next.jsのImageコンポーネントを利用してみる。 # プロフィール画像 <Image src="/images/profile.jpg" width=
next/imageでサイズ指定せずにアスペクト比を保って表示する | Tech Q Lab - 株式会社キューのテックブログ
概要next/imageは画像を自動で最適化してくれる便利なコンポーネントです。 使用には基本的にサイズ（width, height）を事前に指定する必要がありますが、APIから画像を受け取って表示する場合など、事前にサイズを指定したくないケースがあると思います。 この記事では、そのような場合でもnext/imageを使って画像を表示する方法をご紹介します。 環境としては、Next 12.1.2 を使用します。 Next.js 13以上を使用する場合は、こちらの記事をご覧ください。
The release of Go 1.16 introduced a new embed package in the Go standard library. It provides access to files embedded in a Go program at compile time using the new //go:embed directive. It’s a powerful new feature because it allows building a binary with static dependencies like templates, HTML/CSS/JS, or images self-contained. This portability is great for easy distribution and usage. Previously
Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう - Qiita
今回は、Next.jsで全体の設定ができる_document.js(tsx) と_app.js(tsx) について解説してききます✍️ _document.js(.tsx) Next.jsのPageコンポーネントはデフォルトでは<html>・<body>タグの定義を行いますが、それらを拡張したい場合は _documet.js(tsx) を作成し、その中で Document コンポーネントを継承したクラスを実装しましょう。 class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } render() { return ( <Html
Optimizing: Fonts | Next.js
Font Optimization next/font will automatically optimize your fonts (including custom fonts) and remove external network requests for improved privacy and performance. 🎥 Watch: Learn more about using next/font → YouTube (6 minutes). next/font includes built-in automatic self-hosting for any font file. This means you can optimally load web fonts with zero layout shift, thanks to the underlying CSS
Server Componentとuseフック Next.js 13において、コンポーネントはサーバー側でレンダリングされるサーバーコンポーネントがデファクトになりました。 一方、 先日Reactに追加されたuseフックは、再レンダリングが走らないサーバーコンポーネントでは特に意識せずに利用する事が出来ますが import { use } from 'react' async function getTodoList() { // https://jsonplaceholder.typicode.com/ const response = await fetch('https://jsonplaceholder.typicode.com/todos'); const result = await response.json(); return result; } export defaul
Next.js v.13のApp Directry × Google Analytics・トラッキングでお困りのあなたへ（TypeScript） - Qiita
Next.js v.13のApp Directry × Google Analytics・トラッキングでお困りのあなたへ（TypeScript）GoogleAnalyticsTypeScript個人開発Next.jsuseRouter おはこんハロチャオ～ ということで最近Next.js13でポケモン関連のwebアプリを作ったのですが、 Next.js13のApp Directryを触れるのが初めてだったので苦戦。。。 特にAnalyticsは避けて通れないのにもかかわらず日本語の情報が不足している感じがしたので、解決方法をお伝えできればと思います ちなみに作ったのは、ポケモンのタイプ相性を詳細に知れるサービスです バトル向けに使いやすい機能を追加していくつもりなので、よかったら見ていってください 前提 Google Analyticsを導入した回数もそんなに多くないので、前と同じように調
Next.js 13 レンダリングとデータフェッチ
テーマ選定理由 昨年10月末にNext.js13が発表され、様々な変更点の中で、レンダリングやデータフェッチの方式がReact18の恩恵が受けられるように変わり、パフォーマンスが向上するということを知り、これまで新規開発の案件しか経験していなかった自分にとって、普段の業務でも特別扱ったことのなかった非機能要件(+Next.js13)について勉強できるよい機会だと考え選定した。 概要 レンダリング サーバーコンポーネント、クライアントコンポーネント 静的、動的レンダリング データフェッチ 奨励事項 SCでのデータフェッチ 静的、動的データフェッチ パフォーマンス検証 SC、CCのフェッチデータ表示速度 fetch() リクエストの自動重複排除 ストリーミング 結論&感想 レンダリング サーバーコンポーネント(SC)、クライアントコンポーネント(CC) Next.js 13からの新しい考え方と
こんにちは、こんばんは、kubotakです。（@kubotak_public） 今回の記事は、M＆Aクラウドの新しいプロジェクトのフロントエンドにSvelteKitを採用したよ！という内容です。 なぜSvelteKitを採用したのか、他のフレームワークと検討してなぜ採用に至ったのかなどを紹介したいと思います。 SvelteKitってなに？SvelteKit気になってる！な方はぜひお付き合いください。 SvelteKitってなに？ 数年前からReact、Vue.jsに次ぐUIフレームワークとして人気が出ているSvelteをベースにしたSSRやSSGが実現できるフレームワークです。 Svelteは日本では名前を聞いたことがある程度で詳しく知らない。という方が多いと思いますが、StateOfJSでは2019年から人気のあるフロントエンドフレームワークです。 また、SvelteKitは2021年で
おはこんにちばんは。今回は Next.js で OGP画像 の動的生成をしてみました！ 自作したブログなどをどうせなら Twitter や SNS 等の SNS にシェアした際に、OGP 用画像を表示して視覚的にもアピールしたいですよね！分かります。私もそうでした。でも、どうやってページ毎に OGP画像 を生成すればいいのか分からんですよね。 そこで、今回は Next.js で Vercel にデプロイ時のOGP画像を動的に生成する方法を解説しようと思います。 サンプルコードはこちら。 実行環境Next.js 10.0.0React 17.0.1Canves 2.6.1 必要なライブラリをインストール今回は Next.js のサーバーサイド の処理で画像生成していくので、 node-canvas というライブラリを利用します。サーバサイドで Canvas が利用できるライブラリです。
Next.jsに新しくなったMUI(Material-UI v5)とEmotionを導入して新機能を試す | ZUMA Lab
Material UI の v5 がリリースされました。 v5 から MUI として新しくリニューアルされました。 公式サイトもリニューアルしていますね。 v5 から内部で使用されているスタイリングソリューションが Emotion か styled-components か選択できます。 今回は Next.js/Typescript プロジェクトに Material-UI/Emotion を導入します。 また今回から新たに追加された MUI の新機能や変更された記述方法を試してみます。 今回ソースは基本的には公式 Github の example を参照致しました。 環境macOS Big Sur 11.15.2Next.js 11.1.2Typescript 4.4.3npm 7.7.6yarn 1.22.4Next.js のプロジェクトを作成以下のコマンドを実行して Typescrip
ダイナミックルーティングとはNext.js では、pages/books/[id].tsx のようなファイル名でページを作成すると、1 つのファイルで、 /books/001/books/002/books/003のようなパス (URL) によるアクセスをハンドルできます。 これを ダイナミックルーティング (Dynamic Routes) 機能と呼びます。 Next.js のページコンポーネント (/pages/xxx.tsx) は、そのページのエントリポイント（ルートコンポーネント）となるため、通常の React コンポーネントとは違って、上位のコンポーネントから props 情報を渡すことができません。 そこで Next.js では、ページコンポーネントの実装ファイル内で getStaticProps という関数を定義することで、ページコンポーネントに渡す props 情報を生成でき
Denoで実装されたフレームワークとしてはFresh/Aleph.js/Ultraあたりが積極的に開発が進められており、勢いがありそうな印象です
【Next】getInitialProps・getStaticProps・getStaticPaths・getServerSideProps の使い方まとめ - 7839
Next.js で開発しているときに、getInitialProps・getStaticProps・getStaticPaths・getServerSideProps について、いつ、どのように使うべきか、きちんと整理できておらず、自分なりの整理をしてみた。 今回整理する API は、どれもページコンポーネントで、プリレンダリングをしてデータを取得（フェッチ）する際に使用するものである。getInitialProps は「リクエスト時」にデータを取得する。そして、v9.3 から用途に応じて、より宣言的に書くことができるよう、以下の3つが追加された。 SSG用のAPI getStaticProps（「ビルド時」にデータを取得する） getStaticPaths（データに基づいて動的ルーティングを指定する） SSR用のAPI getServerSideProps（「リクエスト時」にデータを取得
windows10DockerDesktop for Win 3.5.xLaravel 8.xPHP 8.xnode v16.13.1npm 8.1.2Next.js 12.0.7React 17.0.1VsCodegitbash 2.32.0.1ゴールLaravel側で簡単なAPIを作成し、Nextjs側からデータフェッチできることNext.jsでhtmlをプレレンダリングしてブラウザに表示できること構成 前提Jamstack ・一般的なwebアプリやSPAとは異なり、サーバー側でビルドされた静的なHTMLを取得して、 ブラウザで表示するだけの構成 ・動的なデータはサーバーでのビルド時にサーバー側でAPIやDBからデータを取得して htmlに組み込む ・SEO評価が高いという観点から、Jamstackはブログやコーポレートサイトの作成に向いている ・データが更新されたタイミングで都度ビル
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.js の Image コンポーネントで画像を表示する (next/image)
Top 5 GraphQL Resources for Next.js Developers in 2021
Next.js と Differential Loading - Qiita
Cloud Run上で動かすNext.jsアプリのDockerイメージサイズを軽くする
Amplify ConsoleでServer Side Renderingするチュートリアルを作った
Next.jsでウェブ開発をするにあたって知ってると便利なリソース集
From Figma to Next.js App in Minutes
Next.js で PlanetScale を使ってみた | DevelopersIO
Next.js環境でのPWA(Progressive Web App)の導入手順
Next.js で環境変数を扱う (.env, NEXT_PUBLIC, NODE_ENV)
https://docs.expo.io//guides/using-nextjs
Next.js10の新機能「Commerce」を使って爆速でECサイトを構築してみた
Next.js の API Routes に Apollo Server を立てる
vercel/commerceのソースコードからNextjsのプラクティスを学ぶ
華麗なるWebフレームワーク Astro の使い方 - コムテブログ
Next.js公式examples集を分類（2021年7月版） - Qiita
これから始める、Next.js | 第1回 Next.jsとは
Portable apps with Go and Next.js
https://twitter.com/shadcn/status/1584971527820541953
【Next.js 13】Client Componentで`use`フックを使う
新規プロジェクトのフロントエンドにSvelteKitを採用しました - M&Aクラウド開発者ブログ
【Next.js × Vercel】OGP画像を動的生成してみた
Next.js のダイナミックルーティング機能を利用する (getStaticPaths, getStaticProps, getServerSideProps)
Denoのフロントエンドフレームワークの比較 - uki00a
【Next.jsとLaravelのJamstackなWebサービス】Part1：環境構築