Dynamic Routing

Directory Structure

src/app > page.tsx (トップページ)
        > posts > page.tsx (/posts)
        > posts > 0001 > page.tsx (/posts/0001)
        > users > [userId] > page.tsx (/users/[userId])
        > users > [userId] > videos > [videoId] > page.tsx (/users/[userId]/videos/[videoId])

src/app > users > [userId] > page.tsx

import React from 'react';

const Page = ( {params}: {params: {userId: string}} ) => {
  return <div>ユーザー名: {params.userId}</div>;
};
export default Page;

src/app > users > [userId] > videos > [videoId] > page.tsx

import React from 'react';

const Page = ({params}: {params: {userId: string, videoId: string}} ) => {
  return <div>ユーザー名: {params.userId}のビデオ名: {params.videoId}</div>;
}