フォルダーでURLを設計する

フォルダーとpageの組み合わせが入口になる

App Routerではapp/notes/page.jsxが/notesに対応します。フォルダーを作るだけではページになりません。pageという特別なファイルが、そのルートのUIを公開します。

layoutはページを包む共通の骨格

layoutはchildrenに下位のページやレイアウトを受け取ります。ナビゲーションや共通の外枠を置くのに向いています。ルートレイアウトにはhtmlとbodyが必要です。入れ子のlayoutで、管理画面だけ別のメニューにすることもできます。

整理とURLを混同しない

componentsやlibに部品と処理を分けると見通しがよくなります。publicの画像は/から始まるパスで参照します。まずは浅い構造を作り、必要になった時点で整理する方が理解しやすいでしょう。

共通のルートレイアウト

import Link from 'next/link'
import './globals.css'

export default function RootLayout({ children }) {
  return (
    <html lang="ja">
      <body>
        <nav aria-label="メイン">
          <Link href="/">ホーム</Link>
          <Link href="/notes">ノート</Link>
        </nav>
        {children}
      </body>
    </html>
  )
}

globals.cssが存在する構成です。各page側にmainを一つ置くとページの主内容が明確になります。

2つ目のページ

export default function NotesPage() {
  return <main><h1>ノート一覧</h1></main>
}