SSG

前提 Next.jsとmicroCMSを使用し、数百ページのWebサイトを構築している App Routerは使用していない（Next.jsの採用時にApp Routerがまだ正式採用されていなかったため） ISRも使用していない（業務要件の兼ね合いから使っていない） Amplify上で、SSGして静的サイトを構築している 課題 ページ数が増えることで、ビルドのパフォーマンスが気になってきた 当初から想定していたが、想定よりも遅いことが気になってきた microCMSの簡単なデータ構造 microCMSでは下図にある通り、各ページからヘッダーとフッターのデータを参照している。また、ヘッダーとフ…

Next.jsでSSGの挙動をローカル環境で確認する方法 手順 開発モードでの確認 確認ポイント Next.jsでSSGの挙動をローカル環境で確認する方法 Next.jsで静的サイト生成（SSG）の挙動をローカル環境で確認する方法は、以下の手順で行います。 手順 1. プロジェクトディレクトリに移動 cd sample-project2. SSGの設定 Next.jsでは、getStaticProps関数を使用してSSGを設定します。 例として、pagesディレクトリにあるページで以下のように設定します。 // pages/index.js export async function getS…

SSGとSSRの違い SSG（Static Site Generation） 特徴 利点 欠点 SSR（Server-Side Rendering） 特徴 利点 欠点 使い分けのポイント 例 SSGで作成されたページには認証機能やAPI呼び出し処理は実装できるのか 認証機能の実装 API呼び出しの実装 まとめ SSGとSSRの違い SSG（Static Site Generation）とSSR（Server-Side Rendering）は、ウェブページの生成方法に関する2つの異なるアプローチです。 それぞれの特徴と利点について説明します。 SSG（Static Site Generation…

たぶんTwitterが楽だったから、はてなから遠ざかったんだと思う。 しばらくは楽しかった。 でも、ママ活とかのDMが増えて、そのうちXとかいうのになって、なんかもう通知で忙しくされるのに疲れた。 GRAVITYやMastodonもちょっとだけ試した。 でもなんか違った。そもそもおれは人とそんなに繋がりたいのかとか疑問に思えてきた。 どうせやるなら今度は一人で地味にやるブログにしようと思った。 だれも見てくれなくていいから、気が向いたときや書きたいことがあったときに気軽に書けるところを探した。 最初にSSGを試した。JykillとかGatsbyとかHugoとか。 これはいいと思った。 Emac…

Docusaurusの多言語化対応(i18n)の設定について情報をまとめます。 注意事項 i18n対応の基本情報 多言語サイトをローカル起動する時の注意点 <補足>yarn startとyarn build && yarn serveの違い 言語切り替え用プルダウンの設定 ユースケースのまとめ 公開サイト 英語版(en) 日本語版(ja) キャプチャ トップページ(en) トップページ(ja) ブログページ(en) ブログページ(ja) docsページ / チュートリアル(en) docsページ / チュートリアル(ja) ドキュメント(docs)の言語切り替え トップページ(pages)の言…

タイトルで全てが完結している記事です。 ↓これ。 github.com Next.jsのようなフレームワークで静的なサイトのコンテンツを生成する際には、元となるデータ（よくあるのはお知らせやブログ記事）を何かしらの形で管理しなくてはならない。 どうするのがいいのか？ 適当に検索してヒットしたのがContentlayerだったので使ってみて「いい感じだった」ラッキーというわけです。 「データの管理: 所定のディレクトリにMarkdownファイルを置けばそれが個別のページにレンダリングされる」のような感じ。 まだベータ版なのだけれど十分に使って行けるかと思う*1。 この辺の体験が特によかった。 導…

目次 はじめに SSGとは？ Incremental SSGとは？ Next.jsでのIncremental SSGの実装 4.1 ビルド時に静的ページを生成する 4.2 リクエスト時にページを更新する Incremental SSGのメリット まとめ 1. はじめに コンテンツの更新頻度が高く、かつパフォーマンスを犠牲にしたくないWebサイトでは、Incremental SSG（静的サイト生成）が有効な手法となります。この記事では、Next.jsにおけるIncremental SSGの実装とそのメリットについて詳しく説明します。 2. SSGとは？ SSG（静的サイト生成）は、ビルド時にペー…