【NextJS】Dynamic Routes

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

1. 概要

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

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

2. nodeのインストール

こちらを参考

3. プロジェクトを作成

こちらを参考

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

こちらを参考

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

9. 備考

今回はDynamic Routesの使い方についてでした。

10. 参考

【NextJS】Streaming with Suspense

投稿者プロフィール

Sondon
開発好きなシステムエンジニアです。
卓球にハマってます。

関連記事

  1. 【NextJS】Streaming with Suspense

  2. 【NextJS】SnackbarやLink

  3. 【NextJS】Redux

  4. 【NextJS】Internationalization(i18n) …

  5. 【NextJS】Checkbox・Radio・Select

  6. 【NextJS】SassとTypescriptでレイアウトを構成

最近の記事

  1. 2023.12.03

    Anaconda Navigatorを起動するとNavi…

  2. 2023.12.03

    AnacondaでPython3をインストールする

  3. 2023.12.02

    【NextJS】Local Storage

  4. 2023.12.02

    【NextJS】Canvasを使い、図形を描画

  5. 2023.11.27

    23年 11月 isub 全社会（忘年会）at 横浜【P…

  6. 2023.11.27

    23年 11月 isub 全社会（忘年会）at 横浜【P…

  7. 2023.11.12

    AWSのロールプレイングゲーム「AWS Cloud Qu…

  8. 2023.11.03

    【NextJS】Error Handling

  9. 2023.10.21

    【NextJS】Internationalization…

制作実績一覧

  2. Checkeys