🎉

nextjs app router と pagesディレクトリ

2024/03/24に公開

nextjsのチュートリアルを勉強していてreactのチュートリアルと合わせて実行しようとしたところnextjsでpagesディレクトリが使えなくなっていて困った。

https://qiita.com/mu_tomoya/items/7545bea039e82e483f9e

によると、pagesディレクリを使うこともできるみたい。

https://zenn.dev/collabostyle/articles/7377d383430bf3

app routerに対応していないライブラリも多いようで、pagesに慣れてからapp routerを理解する手順でも良さそう。

変更点

  • layout.tsxは削除。app_router専用のファイルのため
  • favicon.ico appディレクトリからpublicディレクトリに移動
  • global.css appディレクトリからstylesディレクトリに移動
  • page.tsx appディレクトリからsrc/pages/index.tsxに移動

tailwind.config.ts 対象ファイルの場所をの設定を変更

"./pages/**/*.{js,ts,jsx,tsx,mdx}" -> "./src/pages/**/*.{js,ts,jsx,tsx,mdx}"

Discussion