はじめに
Next.jsは非常に重要なフレームワークとなり、その最新版Next.js 13が公開されました。本記事では、特に重要なNext.jsのファイル名とディレクトリの命名規則に焦点を当て、詳しく解説します。
今回はTypescriptベースで説明をしていますがJavascriptでも同様です
フルスタックWebフレームワークNext.jsのインストールの手順とチュートリアルの紹介
Next.jsのページの命名規則
Next.jsでは、pagesディレクトリに.jsまたは.tsの拡張子を持つReactコンポーネントを作成するだけでページとして扱うことができます。これにより、自動的にルーティングが設定されます。しかし、特定のファイル名やディレクトリ名は特別な意味を持ちます。
Nextjs13からの新機能
Nextjs13になりさまざま機能が追加されましたが、大きな違いとしてまずApp Routerの追加が挙げられます。
以前は、pagesの下にindex.tsを作成すると/でアクセスでき、pages/api/test.tsというファイルがあると/api/testというパスでアクセスすることができましたが、Nextjs13からは、このルーティングが変更になります
ページのファイル名
ページは、page.tsというファイル名に変更になります
例えば「app/test/pages.ts」というファイル名が存在する場合は、/testでアクセスできます
今までは「ディレクトリ/index.ts」というファイル名を作成すれば「/ディレクトリ名」でアクセスできましたが、index.tsの部分をpage.tsにする必要があります
では、/user/:idのような場合は元々のnextjsのようにディレクトリ名を[id]にすることで可変なルーティングが実現できます
APIのファイル名
APIは、ファイル名をroute.tsとする必要があります。
ページの場合と同様に「app/api/test/pages.ts」というファイル名が存在する場合は、/api/testでアクセスできます
また、app/page.tsが存在している状態でapp/route.tsを作成した場合、同一ルートになってしまうため、別のディレクトリ（例えばapp/など）にする必要があります
以前はpages/api/ディレクトリ名のようになっていましたが、新しくなったことでファイル名をroute.tsとする必要があります
そのほかのファイル名の規則
Next.js13でのAPP Routerで定義されたファイル名の規則について下記のようになっており、さまざまなファイル名で多くの機能があるようです
| ファイル名 | 説明 |
|---|---|
layout | UIのレイアウトファイル |
page | ページファイル |
loading | UI の読み込みのファイル |
not-found | UI が見つからない場合のファイル |
error | エラー UIのファイル |
global-error | グローバルエラーUIのファイル |
route | サーバー側 API エンドポイント |
template | 特別に再レンダリングされたレイアウト UIのファイル |
default | 並列ルートのフォールバック UIのファイル |
APIの関数名
これまでは下記のようにhandlerという関数で定義していました。
export default async function handler(
req: NextApiRequest,
res: NextApiResponse
) {
res.status(200)
}
この場合、リクエストメソッドごとに条件文を作成し、「if (req.method === ‘POST’) {、、、」のようにする必要がありましたが、Nextjs13に関しては関数名をPOSTにすることでPOSTメソッドしか受け付けなくなります
import { NextResponse } from 'next/server';
export async function POST(request: Request) {
const { param } = await request.json();
return NextResponse.json({ param });
}
paramはbodyパラメータにjson形式で設定されたパラメータになります。
GETメソッドについては関数名をGETにすればよくPUT、PATCH、DELETEなどのサポートされています
