Next.js 02 ルーティング

// app/page.tsx → "/"
export default function Page() {
  return <h1>Hello Next.js!</h1>
}

// app/blog/page.tsx → "/blog"
import { getPosts } from '@/lib/posts'
export default async function Page() {
  const posts = await getPosts()
  return <ul>{posts.map((p) => <li key={p.slug}>{p.title}</li>)}</ul>
}

// app/layout.tsx(ルートレイアウト:必須)
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="ja">
      <body>
        <header>My Site</header>
        {children}
      </body>
    </html>
  )
}

// app/blog/[slug]/page.tsx → /blog/hello, /blog/world ...
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
  const { slug } = await params          // ★ params は Promise(await が必要)
  const post = await getPost(slug)
  return <article>{post.title}</article>
}
 
// ビルド時に作っておくページを指定(任意)
export async function generateStaticParams() {
  const posts = await getPosts()
  return posts.map((p) => ({ slug: p.slug }))
}

import Link from 'next/link'
<Link href="/blog">ブログ</Link>
<Link href={`/blog/${post.slug}`}>{post.title}</Link>

// app/blog/loading.tsx  → データ取得中に自動表示(Suspense で包まれる)
export default function Loading() { return <p>読み込み中...</p> }

// app/blog/error.tsx  → 予期しないエラー時(Client Component 必須)
'use client'
export default function Error({ error, reset }: { error: Error; reset: () => void }) {
  return (<div><p>問題が発生しました</p><button onClick={() => reset()}>再試行</button></div>)
}

// 404: 見つからない時に notFound() を呼ぶ → not-found.tsx が表示
import { notFound } from 'next/navigation'
if (!post) notFound()

// app/api/posts/route.ts → GET/POST /api/posts
export async function GET() {
  const posts = await getPosts()
  return Response.json(posts)
}
export async function POST(request: Request) {
  const body = await request.json()
  // 認証チェック・バリデーション → 保存
  return Response.json({ ok: true }, { status: 201 })
}

// proxy.ts(プロジェクト直下 or src/ 直下)
import { NextResponse, type NextRequest } from 'next/server'
export function proxy(request: NextRequest) {
  const hasSession = request.cookies.has('session')
  if (!hasSession) return NextResponse.redirect(new URL('/login', request.url))
}
export const config = { matcher: ['/dashboard/:path*'] }