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>;
}