pages/
├── index.js  →  / （ルート）
└── blog/
    └── index.js  →  /blog （ブログのルート）

pages/
├── index.js  →  / （ルート）
├── blog/
│   ├── index.js  →  /blog （ブログのルート）
│   └── first-post.js  →  /blog/first-post （ブログの中の最初の投稿）
└── dashboard/
    └── settings/
        └── username.js  →  /dashboard/settings/username

pages/
├── index.js  →  / （ルート）
├── blog/
│   ├── index.js  →  /blog （ブログのルート）
│   ├── [slug].js  →  /blog/:slug （ブログの各投稿の動的ルート）
│   ├── tag/
│   │   ├── [tag].js  →  /blog/tag/:tag （ブログの各タグの動的ルート）
│   └── page/
│       └── [page].js  →  /blog/page/:page （ブログの各ページの動的ルート）
└── dashboard/
    └── settings/
        └── username.js  →  /dashboard/settings/username （ダッシュボードの設定の中のユーザー名）

// メニューバーとフッターを使うためにインポートします
import Navbar from './navbar'
import Footer from './footer'

// レイアウトという名前の新しいコンポーネントを作ります
export default function Layout({ children }: { children: React.ReactNode }) {
  return (
    // レイアウトはメニューバー、
    // 主要な内容（children）、そしてフッターの3つの部分から成り立ちます
    <>
      <Navbar />
      <main>{children}</main>
      <Footer />
    </>
  )
}

// レイアウトコンポーネントをインポートします
import Layout from '../components/layout'

// MyAppという名前のカスタムアプリを作ります
export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    // レイアウトでアプリ全体を包みます。
    // それにより全てのページで同じレイアウトが使われます
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

// 必要な部品を取り入れます
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'

// Pageという名前のページを作ります
export default function Page() {
  return (
    // ここにページの中身を書きます
  )
}

// getLayoutという特別なものを追加して、レイアウトとして使いたい部品を返すようにします
Page.getLayout = function getLayout(page: ReactElement) {
  return (
    // 入れ子になったレイアウトを作っています
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

// MyAppという名前のカスタムアプリを作ります
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // ページごとに定義されているレイアウトを使います、もし存在していれば
  const getLayout = Component.getLayout || ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

// Reactの要素という型と、さっき作ったページの型を取り入れます
import type { ReactElement } from 'react'
import Layout from '../components/layout'
import NestedLayout from '../components/nested-layout'
import type { NextPageWithLayout } from './_app'

// Pageという名前のページを作ります。このページはさっき作ったページの型に従います
const Page: NextPageWithLayout = () => {
  return <p>hello world</p> // hello worldと表示します
}

// getLayoutという特別なものを追加して、レイアウトとして使いたい部品を返すようにします
Page.getLayout = function getLayout(page: ReactElement) {
  return (
    <Layout>
      <NestedLayout>{page}</NestedLayout>
    </Layout>
  )
}

export default Page // このページを他の場所で使えるようにします

// 必要な型を取り入れます
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import type { AppProps } from 'next/app'

// ページの型を定義します。この型にはgetLayoutという特別なものが含まれています
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

// アプリの設定に関する新しい型を作ります。
// この型はComponentプロパティを上書きして、さっき作ったページの型を使います
type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

// MyAppという名前のカスタムアプリを作ります
export default function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // ページごとに定義されているレイアウトを使います、もし存在していれば
  const getLayout = Component.getLayout ?? ((page) => page)

  return getLayout(<Component {...pageProps} />)
}

// 必要なモジュールをインポートします
import useSWR from 'swr'
import Navbar from './navbar'
import Footer from './footer'

// Layoutコンポーネントを定義します
export default function Layout({ children }: { children: React.ReactNode }) {
  // useSWRフックを使用して'/api/navigation'からデータをフェッチします。
  // fetcherはデータ取得のための関数です。
  const { data, error } = useSWR('/api/navigation', fetcher)

  // エラーハンドリング: データの取得に失敗した場合、エラーメッセージを表示します
  if (error) return <div>読み込みに失敗しました</div>
  // データがまだ読み込まれていない場合、ローディングメッセージを表示します
  if (!data) return <div>読み込み中...</div>

  // データが読み込まれたら、NavbarとFooterを表示し、その間に子要素を配置します。
  // Navbarにはdata.links（フェッチしたデータ）を渡します。
  return (
    <>
      <Navbar links={data.links} />
      <main>{children}</main>
      <Footer />
    </>
  )
}

// pages/index.tsx

import React from 'react'

type Props = {
  message: string
}

const HomePage = ({ message }: Props) => {
  return <div>{message}</div>
}

export default HomePage

// components/Layout.tsx

import React from 'react'

type Props = {
  children: React.ReactNode
}

const Layout = ({ children }: Props) => {
  return (
    <div>
      <header>Header</header>
      <main>{children}</main>
      <footer>Footer</footer>
    </div>
  )
}

export default Layout

// pages/index.tsx

import React from 'react'
import Layout from '../components/Layout'

type Props = {
  message: string
}

const HomePage = ({ message }: Props) => {
  return (
    <Layout>
      <div>{message}</div>
    </Layout>
  )
}

export default HomePage

// components/Layout.tsx

/** @jsxImportSource @emotion/react */
import { css } from '@emotion/react'
import React from 'react'

type Props = {
  children: React.ReactNode
}

const Layout = ({ children }: Props) => {
  return (
    <div css={styles.container}>
      <header css={styles.header}>Header</header>
      <main css={styles.main}>{children}</main>
      <footer css={styles.footer}>Footer</footer>
    </div>
  )
}

const styles = {
  container: css`
    display: flex;
    flex-direction: column;
    min-height: 100vh;
  `,
  header: css`
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
  `,
  main: css`
    flex: 1;
    padding: 20px;
    text-align: center;
  `,
  footer: css`
    background-color: #f5f5f5;
    padding: 20px;
    text-align: center;
  `,
}

export default Layout

// pages/posts/[id].tsx

import { useRouter } from 'next/router'
import React from 'react'
import Layout from '../../components/Layout'

const PostPage = () => {
  const router = useRouter()
  const { id } = router.query

  return (
    <Layout>
      <div>Post: {id}</div>
    </Layout>
  )
}

export default PostPage