Zenn
Open5

Next.js 13を触ってみる

いもけんいもけん

Next.js13

インストール

基本的な雛形

npx create-next-app nextjs13-sample --ts --use-npm

新機能を利用するためにnext.config.jsにてappDirを有効にする必要がある

next.config.js
/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  experimental: {
    appDir: true,
  },
}

module.exports = nextConfig

設定済みの雛形

オプションで--experimental-appをつけることで、設定済みの雛形を作成することができる

npx create-next-app nextjs13-sample --ts --experimental-app --use-npm
いもけんいもけん

ルートディレクトリ

Next.js13からルートディレクトリはpagesからappに変更
(pagesも利用可能だがappの機能は使用できない)
pagesが存在するとエラーになってしまうため削除

いもけんいもけん

ファイルシステムルーティング

いままでpagesには基本にはpageファイルだけで、アプリで共通の設定が_documentや_appなどだったが、それが各ページ毎におけるようになったイメージ

ページの追加

appディレクトリではaboutディレクトリを作成してその下にpage.tsxファイルを作成する必要がある
よってaboutpageを作成する場合下記のようなディレクトリ構成になる

├── app/
    ├── about/
    |   ├── layout.tsx (/aboutのlayout)
    |   └── page.tsx (/about)
    ├── layout.tsx (ルートページのlayout)
    └── page.tsx (ルートページ)

ファイル別の役割

  • page.tsx: ページで読みこまれる
  • ayout.tsx: ページ毎のレイアウト
  • loading.tsx: Suspenseが発生した時のローディングView
  • error.tsx: Suspenseでエラーが発生したきのエラーView
  • template.tsx: レイアウトに似ているが、レイアウトと違い状態を引き継がない
  • head.tsx: Head の設定
    (それぞれページごとに設置できる)