Next.js blogの落ち穂拾い

404 Not Found問題

前回、Next.jsでblogを構築しました。しかし、ブラウザで一旦記事を表示させた後、F5を押下してreloadすると、404 Not Foundが出ていました。恐らくyarn devでローカルで確認していたキャッシュが残っていたせいだと思います。

これは、yarn buildで生成した静的ページは.htmlか.txtであるにも関わらず、記事一覧に表示される記事のリンクは、https://nomad-dev-life.net/blog/2024-10-27-create-blog-with-nextjsのように.htmlや.txtのようなsuffixが無い為です。

SSRに変更して、サーバー側でこのURIをroutingしてレスポンスを返せば良いのでしょうけど、今回はSSGのまま行きたかったので、解決方法を調べてみました。その結果、nginxの設定に以下を追加することで、suffix無しでアクセスすることができるようになりました。

try_files $uri $uri.html /$uri /index.html;

try_filesディレクティブは、指定されたファイルやディレクトリを順番に探し、最初に見つかったものを返す機能です。主に静的ファイルの配信やリバースプロキシとしての役割を果たすときに使われ、ファイルが見つからない場合には404エラーや他の処理にフォールバックするよう設定することができます。

これを使って、foobar.htmlの内容を、/foobarのようなsuffix無しのリクエストが来た時に返すことができるようになります。

Font Family の変更

Tailwind CSS BlogのデフォルトのFont Familyがちょっと好みと違い、違和感がありました。

Starterによって変更方法は違うと思いますが、このStarterではデフォルトで適用されるFont Familyを、tailwind.config.jsの以下の部分で変更することができます。今回は以下のように設定することで、note風にしてみました。

      fontFamily: {
-       sans: ['var(--font-space-grotesk)', ...fontFamily.sans],
+       sans: ['YakuHanJPs', 'Segoe UI', 'Arial', 'Meiryo', 'sans-serif'],
      },

本文のFont Sizeの変更

本文のFont Sizeがちょっと小さく感じたので、同じくtailwind.config.jsの以下の部分で変更しました。

      typography: ({ theme }) => ({
        DEFAULT: {
(...snip...)
            code: {
              color: theme('colors.indigo.500'),
            },
+           p: {
+             fontSize: '1.15rem',
+           },

おわりに

Next.jsで構築したblogサイトの404 Not Found問題を解決し、フォントを調整しました。

nginx のtry_filesは良く用いられる手法のようですが、何せフロントエンド何も分からない状態なので、色々躓いています…。

ついでに、Avatarも変えました。これで記事を書くことに集中できそうです😄