結論: pagesは使えるので安心してください
Next.jsをこれから勉強し始めたいという方への、初歩の初歩の説明です。これはおそらく市販のNext.jsの参考書には載っていません。
あなたは市販のNext.jsの入門書を読んでいるとします。Next.jsをまずインストールすることから始めますね。その際に、以下のコマンドを打ちましょうと書いてあると思います。
npx create-next-app@latest
これを実行すると、なんかわからんけど色々と聞かれますよね。eslintは有効にしますか？とか、TypeScriptは有効にしますか？とか聞かれます。「App Router？まあなんかrecommendedってなってるからYesにしとくか」といって、そのまま進めます。
最初のステップとして、「pagesの中にあるindex.jsxを編集しましょう」と書いてあるとします。するとどうでしょう。あなたはとてつもない壁にぶつかります。
あれ、pagesディレクトリがおらん
なんということでしょう。pagesディレクトリがないではないですか。あなたはどうすればわからずググると、このような説明を解説してある記事が見つかります。
「Next.js 13からはApp Routerになりました」
あなたはApp Routerが何がなんだかわからず勘違いして、pagesが使えなくなったと勘違いをするかもしれません。その瞬間、あなたは自分のもってる参考書が役に立たなくなったと勘違いして、破り捨てそうになるかもしれません。
でもちょっと待ってください。
pagesディレクトリを使う方法
安心してください。あなたのその参考書は全然まだ役に立ちます。Next.jsは確かに13からApp Routerが追加されました。Server Componentなるものもあって、記法が今までと少し違います。
しかし、Next.jsは互換性を切っていません。今までのpagesも全然使えます。初心者の方はむしろNext.jsに慣れるためにもpagesディレクトリをぜひ使ったほうがいいです。そしてNext.jsに慣れてきたら、App Routerに挑戦してみてください。
まず、インストールするさいに、Would you like to use App Router? (recommended) と聞かれたときに、Noを選択するとpagesディレクトリが作られます。
もしYesを選択しても大丈夫です。
まず、pagesディレクトリを作ってしまいましょう。もし、srcディレクトリの中にappがあったら、それと同じ階層に作りましょう。
mkdir src/pages
mkdir src/styles # cssファイルを置く
そして、appに入っているpage.tsxをpagesディレクトリの中に移行させましょう。名前もindex.tsxに変えましょう。global.cssもstylesの中に移行させましょう
mv src/app/page.tsx src/pages/index.tsx
mv src/app/global.css src/styles
また、pagesディレクトリには、_app.tsxというものがあるので、それもpages直下に作りましょう。
import type { AppProps } from "next/app";
import "../styles/globals.css";
export default function MyApp({ Component, pageProps }: AppProps) {
return <Component {...pageProps} />;
}
最後に,appディレクトリを削除しましょう。layout.tsx,favicon.icoなど残っていますが、faviconは使いたければpublicに移動させましょう。layoutはApp Router用なので、pagesには必要ないので大丈夫です。
rm -rf src/app
これで完成です。npm run devで起動させてみましょう。無事に立ち上がると思います。これでpagesが使えて、そのままあなたの参考書は十分に役に立ちます。参考書、入門サイトの通りにNext.jsに入門しましょう。
最後に
ファイル操作するのが面倒だったら、一旦プロジェクト作り直して、App Routerを使うか聞かれた時にNoを選択すれば簡単です。