Next.js 13のappディレクトリでページを試す

Next.js 13でAppディレクトリという仕組みができたらしいので使ってみる。

srcディレクトリ以下はこのような状態です。

% tree src
src
├── app
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
└── pages
    └── api
        └── hello.ts

Defining Routesの説明に合わせてdashboardとsettingsディレクトリを作成し、どちらにもpages.tsxを追加します。

% tree src
src
├── app
│   ├── dashboard <-追加
│   │   ├── page.tsx <-追加
│   │   └── settings <-追加
│   │       └── page.tsx <-追加
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
└── pages
    └── api
        └── hello.ts

page.tsxはそれぞれ次のようにしてみます。コンポーネント名をPageとしましたが別になんでもいいようでした。

// src/app/dashboard/page.tsx
export default function Page() {
  return <>dashboard</>;
}

// src/app/dashboard/settings/page.tsx
export default function Page() {
  return <>settings</>;
}

ブラウザで開いて確認できました。

ルートセグメント名を動的にできるダイナミックセグメントも試してみます。こちらも説明に合わせて次のように。[slug]のように角括弧で囲むことでダイナミックセグメントになります。

src
├── app
│   ├── blog <- 追加
│   │   └── [slug]
│   │       └── page.tsx <- 追加
│   ├── dashboard
│   │   ├── page.tsx
│   │   └── settings
│   │       └── page.tsx
│   ├── globals.css
│   ├── head.tsx
│   ├── layout.tsx
│   ├── page.module.css
│   └── page.tsx
└── pages
    └── api
        └── hello.ts

page.tsxは次のようにしました。

export default function Page({ params }: { params: { slug: string } }) {
  return <>This blog is {params.slug}!</>;
}

slugの部分を123としたら期待通り表示されました。

Next.js 13のappディレクトリでページを試す

参考

コメント