Appディレクトリに移行した話

この記事はKMC Advent Calendar 2023の23日目の記事です。
22日目はwalkureさんのk0sをさくらVPSに入れてKubernetesをやっていくでした。

お久しぶりです。

Q.ブログ作ったきり1年間投稿してなかったけど何やってたの?
A.何も……

appディレクトリに対応してから記事を書こう~とか思いつつ、作業を先延ばしにしていたら1年が経ってました。恐ろしい。
趣味記事1発目のネタにしようと思っていたオシャレな手帳も未開封のままです。2023年のダイアリーリフィルとかもう使えないよ。どうしよう。

そうこうしているうちに今年もアドベントカレンダーの季節がやってきたので重い腰を上げて対応しました。
今回は具体的に行った内容を(めっちゃ短いですが)書こうと思います。

Next.jsのバージョンアップ

今回の改修はv13.3以降で使える機能を利用しています。(後述)
以下のコマンドでバージョンアップを行います。
npm i next@latest react@latest react-dom@latest eslint-config-next@latest

pagesの中身をappに移す

ここが本編になる予定だったのですが、こちらとほぼ同じなので省略
https://blog.microcms.io/nextjs13-microcms-rsc/

静的エクスポートを行う

v13.3以降、App Routerは静的エクスポートに対応しています。
公式ドキュメントに倣って、next.config.jsをいじります。
const nextConfig = {
  output: 'export',
  experimental: {
    appDir: true,
  },
};
output: 'export' を設定すれば、next exportを行わずとも、next buildはoutディレクトリを出力してくれます。
なので、最後にworkflowからnext exportを行う以下の処理を削除します。
   - name: Export Next.js App
 run: npm run export

さいごに

もしかしてexport できないのでは、と作業中はひそかに焦っていたんですが、調べてみたらそんなことはなかった。
公式ドキュメントを漁ることの大切さを知りました。
気が向いたらデザインも何とかしようと思います。

明日(今日)の記事はMikanさんのkubernetesクラスタ構築で困ったことを雑に記すです。