【NextJS】Dynamic Routes

ホーム
BLOG
【Next.js】
【NextJS】Dynamic Routes

【Next.js】
2023.10.04

【NextJS】Dynamic Routes

概要
nodeのインストール
プロジェクトを作成
必要なライブラリをインストール
ソースコード
サーバー起動
ブラウザで確認
ディレクトリの構造
備考
参考

【NextJS】Metadata(Head,Title)・Script・Parameters

1. 概要

前回はMetadata（Head, Title）やScript、Parametersの使い方についてでした。今回はDynamic Routesの使い方についてです。

対象としては開発を１年程やってて自分で最初から開発してみたい方になります。そのため細かい用語などの説明はしません。

2. nodeのインストール

こちらを参考

【Node.js】バージョン管理をVoltaに移行する | 株式会社isub

3. プロジェクトを作成

こちらを参考

【NextJS】SassとTypescriptでレイアウトを構成 (isub.co.jp)

4. 必要なライブラリをインストール

こちらを参考

【NextJS】Redux (isub.co.jp)

5. ソースコード

※前回より差分のみを記載

5-1-1. src/app/nextjs/nextjs02/shop/[id]

shop/[id]ディレクトリを作成

5-1-2. src/app/nextjs/nextjs02/shop/[id]/page.tsx

"use client";

import { useSearchParams } from "next/navigation";
import scss from "../../page.module.scss";
import GoBack from "@/lib/components/go-back";

const Id = ({ params }: { params: { id: string } }) => {
  const searchParams = useSearchParams();
  const param: string | null = searchParams.get("param");

  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>Parameters</li>
        <ul>
          <li>{param}</li>
        </ul>
        <li>shop</li>
        <ul>
          <li>{params.id}</li>
        </ul>
      </ul>
    </div>
  );
};

export default Id;

5-1-3. src/app/nextjs/nextjs02/[…slug]

[...slug]ディレクトリを作成

5-1-4. src/app/nextjs/nextjs02/[…slug]/page.tsx

"use client";

import { useSearchParams } from "next/navigation";
import scss from "../page.module.scss";
import GoBack from "@/lib/components/go-back";

const Slug = ({ params }: { params: { slug: string } }) => {
  const liElements = Object.entries(params.slug).map(([idx, e]) => (
    <li key={idx}>{`${parseInt(idx) + 1} ⇒ ${e}`}</li>
  ));

  const searchParams = useSearchParams();
  const param: string | null = searchParams.get("param");

  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>Parameters</li>
        <ul>
          <li>{param}</li>
        </ul>
        <li>Hierachy</li>
        <ul>{liElements}</ul>
      </ul>
    </div>
  );
};

export default Slug;

5-1-5. src/app/nextjs/nextjs02/page.module.scss

.component {
  color: blue;
  & ul {
    margin-left: 20px;
    & li {
      list-style: disc;
    }
  }
}

5-1-6. src/app/nextjs/nextjs02/page.tsx

import Link from "next/link";
import scss from "./page.module.scss";
import GoBack from "@/lib/components/go-back";

const Nextjs02 = () => {
  return (
    <div className={scss.component}>
      <GoBack />
      <br />
      <br />
      <ul>
        <li>Dynamic Routes</li>
        <ul>
          <li>Only one segment</li>
          <ul>
            <li>
              <Link
                href={{
                  pathname: "./nextjs02/shop/arikashop",
                  query: { param: "link" },
                }}
              >
                shop/[id] -> shop/arikashop
              </Link>
            </li>
          </ul>
          <li>All segments</li>
          <ul>
            <li>
              <Link
                href={{ pathname: "./nextjs02/blog", query: { param: "link" } }}
              >
                [...slug] -> blog
              </Link>
            </li>
            <li>
              <Link
                href={{
                  pathname: "./nextjs02/blog/isub",
                  query: { param: "link" },
                }}
              >
                [...slug] -> blog/isub
              </Link>
            </li>
            <li>
              <Link
                href={{
                  pathname: "./nextjs02/blog/isub/about",
                  query: { param: "link" },
                }}
              >
                [...slug] -> blog/isub/about
              </Link>
            </li>
          </ul>
        </ul>
      </ul>
      <br />
    </div>
  );
};

export default Nextjs02;

5-1-7. src/app/nextjs/page.module.scss

.components {
  color: blue;
  & ul {
    margin-left: 20px;
    & li {
      list-style: disc;
    }
  }
}

5-1-8. src/app/nextjs/page.tsx

"use client";

import React from "react";
import { Link } from "@mui/material";

import scss from "./page.module.scss";

const Nextjs = () => {
  return (
    <div className={scss.components}>
      <ul>
        <li>
          <Link href="/nextjs/nextjs01" underline="hover">
            Nextjs01
          </Link>
        </li>
        <li>
          <Link href="/nextjs/nextjs02" underline="hover">
            Nextjs02
          </Link>
        </li>
      </ul>
    </div>
  );
};

export default Nextjs;

6. サーバーを起動

npm run dev

7. ブラウザで確認

http://localhost:3000

8. ディレクトリの構造

.
├── README.md
├── next-env.d.ts
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
│   ├── js
│   │   └── script.js
│   ├── next.svg
│   └── vercel.svg
├── src
│   ├── app
│   │   ├── components
│   │   │   ├── component01
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── component02
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── component03
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── component04
│   │   │   │   ├── checkbox-demo.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   ├── page.tsx
│   │   │   │   ├── radio-demo.tsx
│   │   │   │   └── select-demo.tsx
│   │   │   ├── page.module.scss
│   │   │   └── page.tsx
│   │   ├── events
│   │   │   ├── event01
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── page.module.scss
│   │   │   └── page.tsx
│   │   ├── favicon.ico
│   │   ├── globals.css
│   │   ├── globals.scss
│   │   ├── hooks
│   │   │   ├── hook01
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── hook02
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── hook03
│   │   │   │   ├── child.tsx
│   │   │   │   ├── counter-provider.tsx
│   │   │   │   ├── grandchild.tsx
│   │   │   │   ├── myself.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── hook04
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── hook05
│   │   │   │   ├── child.tsx
│   │   │   │   ├── counter-provider.tsx
│   │   │   │   ├── grandchild.tsx
│   │   │   │   ├── myself.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── hook06
│   │   │   │   ├── child.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   ├── page.tsx
│   │   │   │   ├── play-provider.tsx
│   │   │   │   ├── text-box.tsx
│   │   │   │   └── video-player.tsx
│   │   │   ├── page.module.scss
│   │   │   └── page.tsx
│   │   ├── layout.module.scss
│   │   ├── layout.tsx
│   │   ├── nextjs
│   │   │   ├── nextjs01
│   │   │   │   ├── child
│   │   │   │   │   ├── client-page.tsx
│   │   │   │   │   ├── metadata.ts
│   │   │   │   │   └── page.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   └── page.tsx
│   │   │   ├── nextjs02
│   │   │   │   ├── [...slug]
│   │   │   │   │   └── page.tsx
│   │   │   │   ├── page.module.scss
│   │   │   │   ├── page.tsx
│   │   │   │   └── shop
│   │   │   │       └── [id]
│   │   │   │           └── page.tsx
│   │   │   ├── page.module.scss
│   │   │   └── page.tsx
│   │   ├── page.module.scss
│   │   ├── page.tsx
│   │   └── redux
│   │       ├── page.module.scss
│   │       ├── page.tsx
│   │       ├── redux01
│   │       │   ├── child.tsx
│   │       │   ├── counter-slice.ts
│   │       │   ├── grandchild.tsx
│   │       │   ├── hooks.ts
│   │       │   ├── myself.tsx
│   │       │   ├── page.module.scss
│   │       │   ├── page.tsx
│   │       │   └── store.ts
│   │       └── redux02
│   │           ├── child.tsx
│   │           ├── hooks.ts
│   │           ├── image-box.tsx
│   │           ├── image-slice.ts
│   │           ├── page.module.scss
│   │           ├── page.tsx
│   │           ├── store.ts
│   │           ├── text-box.tsx
│   │           └── text-slice.ts
│   ├── lib
│   │   ├── common
│   │   │   ├── definitions.ts
│   │   │   └── sidebar-links.tsx
│   │   ├── components
│   │   │   ├── alert-snackbar.tsx
│   │   │   ├── go-back.tsx
│   │   │   └── spacer.tsx
│   │   ├── footer.tsx
│   │   ├── header.tsx
│   │   ├── sidebar.tsx
│   │   └── utils
│   │       └── util.ts
│   └── scss
│       └── common
│           ├── _index.scss
│           ├── _mixin.scss
│           ├── _mq.scss
│           └── _variables.scss
├── tailwind.config.ts
└── tsconfig.json

34 directories, 104 files