最新版！Next.js14をインストールからルーティング(画面遷移)まで解説【[id],[[…slug]],not-found.tsx,layout.tsx, Link, error.tsx, loading.tsx】

node -v

npx create-next-app@latest

What is your project named? 　
→next-demoと入力してEnter

Would you like to use TypeScript? No / Yes
→Yesを選択してEnter

Would you like to use ESLint? No / Yes
→Yesを選択してEnter

Would you like to use Tailwind CSS? No / Yes
→Yesを選択してEnter

Would you like to use `src/` directory? No / Yes
→Yesを選択してEnter

Would you like to use App Router? (recommended) No / Yes
→Yesを選択してEnter

Would you like to customize the default import alias (@/*)? No / Yes
→Noを選択してEnter

cd next-demo

npm run dev

import React from 'react';

const page = () => {
  return <div>page</div>;import React from 'react';

const page = () => {
  return <div>page</div>;
};

export default page;
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-page.tsx
    |-layout.tsx 

import React from 'react';

const page = () => {
  return <div>About</div>;
};

export default page;

import React from 'react';

const page = () => {
  return <div>contact</div>;
};

export default page;

import React from 'react';

const NotFound = () => {
  return <div>お探しのページはありません。</div>;
};

export default NotFound;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-blogs
    |   |-page.tsx
    |   |
    |   |-0001
    |   |  |-page.tsx
    |   |-0002
    |      |-page.tsx
    |-page.tsx
    |-layout.tsx 

import React from 'react';

const page = () => {
  return <div>ブログページ</div>;
};

export default page;

import React from 'react';

const page = () => {
  return <div>ID:0001</div>;
};

export default page;

import React from 'react';

const page = () => {
  return <div>ID:0002</div>;
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-blogs
    |   |-page.tsx
    |   |
    |   |-0001
    |   |  |-page.tsx
    |   |-0002
    |      |-page.tsx
    |
    |-products
    |      |-page.tsx
    |      |
    |      |-[productId]
    |           |-page.tsx   
    |  
    |
    |-page.tsx
    |-layout.tsx 

import React from 'react';

const page = () => {
  return (
    <div>
      <h1>商品一覧</h1>
      <p>商品A</p>
      <p>商品B</p>
      <p>商品C</p>
    </div>
  );
};

export default page;

import React from 'react';

const page = ({ params }: { params: { productId: string } }) => {
　 console.log(params);
  return <div>商品名:{params.productId}</div>;
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-blogs
    |   |-page.tsx
    |   |
    |   |-0001
    |   |  |-page.tsx
    |   |-0002
    |      |-page.tsx
    |
    |-products
    |      |-page.tsx
    |      |
    |      |-[productId]
    |           |-reviews   
    |           |   |-[reviewId]
    |           |        |-page.tsx
    |-page.tsx
    |-layout.tsx 

import React from 'react';
const page = ({
  params,
}: {
  params: {
    productId: string;
    reviewId: string;
  };
}) => {
  console.log(params);

  return (
    <div>
      商品ID：{params.productId}のレビューID：{params.reviewId}
    </div>
  );
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |   
    |-page.tsx
    |-layout.tsx 

<これまでのディレクトリ構成>
src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-blogs
    |   |-page.tsx
    |   |
    |   |-0001
    |   |  |-page.tsx
    |   |-0002
    |      |-page.tsx
    |
    |-products
    |      |-page.tsx
    |      |
    |      |-[productId]
    |           |-reviews   
    |           |   |-[reviewId]
    |           |        |-page.tsx
    |-page.tsx
    |-layout.tsx 


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー


<今から作るディレクトリ構成>
src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |   
    |-page.tsx
    |-layout.tsx 

import React from 'react';

const page = ({ params }: { params: { slug: string[] } }) => {
  if (params.slug?.length === 2) {
    return (
      <h1>
        {params.slug[0]}年{params.slug[1]}月のお知らせ一覧です。
      </h1>
    );
  } else if (params.slug?.length === 1) {
    return <h1>{params.slug[0]}年のお知らせ一覧です。</h1>;
  } else {
    return <h1>お知らせ一覧です。</h1>;
  }
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |   
    |-page.tsx
    |-layout.tsx 
    |
    |-auth
    |  |-login
    |  |   |-page.tsx
    |  |
    |  |-signup
    |  |   |-page.tsx
    |  |    
    |  |-signout
    |  |   |-page.tsx

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |   
    |-page.tsx
    |-layout.tsx 
    |
    |-(auth)
    |  |-login
    |  |   |-page.tsx
    |  |
    |  |-signup
    |  |   |-page.tsx
    |  |    
    |  |-signout
    |  |   |-page.tsx

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |  
    |-page.tsx
    |-layout.tsx 
    |
    |-dashboard
    |    |-dashboard.tsx

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |  
    |-page.tsx
    |-layout.tsx 
    |
    |-dashboard
    |    |-page.tsx

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-news
    |   |-[[...slug]]
    |        |-page.tsx
    |  
    |-page.tsx
    |-layout.tsx 
    |
    |-_dashboard
    |    |-page.tsx

import { propagateServerField } from 'next/dist/server/lib/render-server';

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

import { propagateServerField } from 'next/dist/server/lib/render-server';

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
       {/* ここを追加 */}
        <header>
          <p>ヘッダーです</p>
        </header>
        {children}
       {/* ここを追加 */}
        <footer>
          <p>フッターです</p>
        </footer>
      </body>
    </html>
  );
}

import React from 'react';

const page = () => {
  return <div>page</div>;
};

export default page;

import { propagateServerField } from 'next/dist/server/lib/render-server';

export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function ProductsLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <>
      <header>商品ページ専用のヘッダーです</header>
      {children}
    </>
  );
}

import { propagateServerField } from 'next/dist/server/lib/render-server';

// ここが最初から書いてあるのでテキストだけ置き換えればOK
export const metadata = {
  title: 'Next.js',
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

import React from 'react';

export const metadata = {
  title: 'アバウトページです',
  description: '説明文です',
};

const page = () => {
  return <div>About</div>;
};

export default page;

// ここを追加
import { Metadata } from 'next';
import { propagateServerField } from 'next/dist/server/lib/render-server';

// ここを変更
export const metadata: Metadata = {
  title: {
    default: 'デフォルトです',
    template: '%sです',
  },
  description: 'Generated by Next.js',
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        {children}
      </body>
    </html>
  );
}

// ここを追加
import { Metadata } from 'next';
import React from 'react';

// ここを変更
export const metadata: Metadata = {
  title: 'アバウトページ',
  description: '説明文です',
};

const page = () => {
  return <div>About</div>;
};

export default page;

import React from 'react';
// インポート(クリックによって移動できるようにする)
import Link from 'next/link';

const page = () => {
  return (
    <div>
      page
      {/* ここを追加 */}
      <Link href="/about">会社概要</Link>
    </div>
  );
};

export default page;

src
 |-app 
    |-about
    |   |-page.tsx  
    |
    |-contact
    |   |-page.tsx
    |
    |-blogs
    |   |-page.tsx
    |   |
    |   |-0001
    |   |  |-page.tsx
    |   |-0002
    |      |-page.tsx
    |
    |-products
    |      |-page.tsx
    |      |
    |      |-[productId]
    |           |-reviews   
    |           |   |-[reviewId]
    |           |        |-page.tsx
    |-page.tsx
    |-layout.tsx 

import React from 'react';
// インポート
import Link from 'next/link';

const page = () => {
  return (
    <div>
      <h1>商品一覧</h1>
      {/* []でルーティングを構成しているとき(APIなどidが動的に変わる想定) */}
      <p>
        <Link href="products/1111">
          商品B
        </Link>
      </p>
      <p>商品C</p>
    </div>
  );
};

export default page;

import React from 'react';
// インポート
import Link from 'next/link';

const page = () => {
  return (
    <div>
      <h1>商品一覧</h1>
      {/* replaceを設定するとブラウザバックで商品一覧を飛ばしてトップページにまで飛ぶことが可能 */}
      <p>
        <Link href="products/1111" replace>
          商品B
        </Link>
      </p>
      <p>商品C</p>
    </div>
  );
};

export default page;

import React from 'react';
// ここを追加
'use client';
// ここを追加
import { useRouter } from 'next/navigation';
import Link from 'next/link';

const page = () => {
  // ここを追加
  const router = useRouter();
  const handleClick = () => {
    console.log('注文送信');
    router.push('/');
  };

  return (
    <div>
      <h1>商品一覧</h1>
      <p>
        <Link href="products/1111" replace>
          商品B
        </Link>
      </p>
      <p>商品C</p>

      {/* ここを追加 */}
      <h1>ご注文内容</h1>
      <button onClick={handleClick}>注文</button>
    </div>
  );
};

export default page;

import React from 'react';

const loading = () => {
  return <div>ローディング中。。。</div>;
};

export default loading;

// クライアントで使うファイルのため
'use client';
import React from 'react';

const Error = () => {
  return <div>読み込みエラーです</div>;
};

export default Error;