Open9

ポートフォリオをApp Routerに書き換え。

purupurupupurupurupu

まずはNext.jsnの最新版install

npm install next@latest react@latest react-dom@latest

ESLintもインストール。
ESLintのサーバーを再起動忘れずに。

npm install -D eslint-config-next@latest

変更点がけっこうありそうですなあ。

The app directory supports nested routes and layouts. Learn more.
Use nested folders to define routes and a special page.js file to make a route segment publicly accessible. Learn more.
Special file conventions are used to create UI for each route segment. The most common special files are page.js and layout.js.
Use page.js to define UI unique to a route.
Use layout.js to define UI that is shared across multiple routes.
.js, .jsx, or .tsx file extensions can be used for special files.
You can colocate other files inside the app directory such as components, styles, tests, and more. Learn more.
Data fetching functions like getServerSideProps and getStaticProps have been replaced with a new API inside app. getStaticPaths has been replaced with generateStaticParams.
pages/_app.js and pages/_document.js have been replaced with a single app/layout.js root layout. Learn more.
pages/_error.js has been replaced with more granular error.js special files. Learn more.
pages/404.js has been replaced with the not-found.js file.
pages/api/* currently remain inside the pages directory.

purupurupupurupurupu

Step 2: Creating a Root Layout

Migrating _document.js and _app.jsとのことなので、page routerのファイルからglobals.cssのようなベースファイルを移植。

getLayout()は使用していないので割愛

purupurupupurupurupu

Step 3: Migrating next/head

インデックスさせているサイトではないので特筆して対応はなかったが、既存のHeadタグ内のものをapp/layout.tsxへ移植。

purupurupupurupurupu

Step 4: Migrating Pages

ここからが本番になってくるのかしら？(´・ω・｀)

  • Step 1: Move the default exported Page Component into a new Client Component.
  • Step 2: Import the new Client Component into a new page.js file inside the app directory.

いきなりやること重たくなったな...
とりあえずPage Router 配下にあるファイル群をそのまま移植するとNG。

Client Componentとして認識されるファイルにuse clientを追加するとOK。
Server Componentとして処理するのが望ましいものも含まれてしまうが、一旦の動作確認としてはヨシとする。

この時点で大体動いちゃったけど、残りの部分もざっと確認しておく。

purupurupupurupurupu

Step 5: Migrating Routing Hooks

  • The new useRouter hook is imported from next/navigation and has different behavior to the useRouter hook in pages which is imported from next/router.
  • The new useRouter does not return the pathname string. Use the separate usePathname hook instead.
  • The new useRouter does not return the query object. Use the separate useSearchParams hook instead.
    You can use useSearchParams and usePathname together to listen to page changes. See the Router Events section for more details.
  • These new hooks are only supported in Client Components. They cannot be used in Server Components.

書いてあること通りっぽいですな。それぞれ使いたい状況に応じてHook呼んでねってことらしい。

purupurupupurupurupu

Step 6: Migrating Data Fetching Methods

うん。パッと見ただけじゃよくわからん。
この辺りの解説は多くあるはずなので、別途参考にさせていただく(´・ω・｀)

SSRとかSSGとかをキャッシュの設定でやれるようになったぜベイベーってことだと理解している。

purupurupupurupurupu

全体通して移行するだけならあまり時間はかからなさそう。
ただ、しっかりチューニングするなら作りによっては色々修正する必要はあるだろうなあ(´・ω・｀)