動的ルートとページの移動

export const notes = [
  { slug: 'react', title: 'Reactの基礎', body: '部品と状態から考えよう。' },
  { slug: 'routing', title: 'ルーティング', body: 'URLとページをつなごう。' },
]

import Link from 'next/link'
import { notFound } from 'next/navigation'
import { notes } from '../../lib/notes'

export default async function NotePage({ params }) {
  const { slug } = await params
  const note = notes.find((item) => item.slug === slug)
  if (!note) notFound()

  return (
    <main>
      <h1>{note.title}</h1>
      <p>{note.body}</p>
      <Link href="/notes">一覧に戻る</Link>
    </main>
  )
}

import Link from 'next/link'
import { notes } from '../lib/notes'

export default function NotesPage() {
  return (
    <main>
      <h1>ノート一覧</h1>
      <ul>
        {notes.map((note) => (
          <li key={note.slug}>
            <Link href={`/notes/${note.slug}`}>{note.title}</Link>
          </li>
        ))}
      </ul>
    </main>
  )
}