Next.jsのApp Routerを理解する

📅

loading..🐩🐩🐩🐩

はじめに 🔗

Next.js 13から利用できるApp Routerを使ってみましょう。

Next.jsはファイルシステムルーティングを採用しているため、アプリケーションのルートはファイル構造によって決まります。

App RouterはServer Components、Server Actions、Suspenseなどをサポートします。

この記事では基本的な使い方を説明します。

ルートページの設定 🔗

既定で作成されるapp/ディレクトリ内のpage.tsxとlayout.tsxで、ルートディレクトリ（/）を設定できます。

app/layout.tsx

export default function RootLayout({children,}: {children: React.ReactNode}) {
  return (
    <html lang="en">
      <body>{children}</body> 
	{/* html, body 태그를 사용하여 레이아웃을 구성*/}
	{/* children은 page.tsx 내부의 컴포넌트를 받아서 레이아웃을 구성한다. */}
    </html>
  )
}

app/page.tsx

export default function Page() {
	return <p>Root Page</p>
}

👨‍💻

layout.tsx

がなくても、Next.jsは実行時に自動でレイアウトを作成します。

npm run devで起動し、http://localhost:3000/↗ にアクセスすると、Root Pageが表示されます。

ルートの定義 🔗

先ほど説明したとおり、Next.jsではファイルシステムルーティングを使うため、ルートはファイルやフォルダーの構造で決まります。

app/の下にフォルダーを作ることで、ルートを作成できます。

app/example/page.tsx

export default function ExamplePage() {
	return <p>Example Page</p>
}

npm run devで起動し、http://localhost:3000/example↗ にアクセスすると、Example Pageが表示されます。

動的ルーティング 🔗

フォルダー名に角括弧を使うと、動的ルートを定義できます。

app/example/[slug]/page.tsx

export default function SlugPage({ params }: { params: { slug: string } }) {
	return <p>{params.slug} Page</p>
}

npm run devで起動し、http://localhost:3000/example/hello↗ にアクセスすると、hello Pageが表示されます。

Route HandlerによるAPIルーティング 🔗

app/api/ディレクトリを作ることで、APIルーティングを利用できます。

app/api/hello.ts

import { NextResponse } from "next/server";
 
export async function GET() {
  return NextResponse.json({ message: "Hello World" });
}

npm run devで起動し、http://localhost:3000/api/hello↗ にアクセスすると、{"message":"Hello World"}が表示されます。

🖐️

route.tsとpage.tsxは同じパスに置けません。

参考 🔗

Next.js公式ドキュメント↗

Next.jsのApp Routerを理解する | PromleeBlog