インストール方法

まずNode 16.8 以降のバージョンが必要なので、Node のバージョンを合わせてください。

その後、構成を全てセットアップしてくれるコマンドが用意されているので、以下を実行してください。

$ npx create-next-app@latest --experimental-app

すると以下のような質問がくるので、順に答えていきましょう。

create-next-appで TypeScript を初期から含めれるようになっていたり、import aliasの設定(この場合だと@/でsrcディレクトリを参照することができる)が入っていたりと、手間のかかる設定が省けてよさそうです。

❯ npx create-next-app@latest --experimental-app
Need to install the following packages:
  create-next-app@13.1.6
Ok to proceed? (y) y
✔ What is your project named? … next-sandbox
✔ Would you like to use TypeScript with this project? … No / Yes
✔ Would you like to use ESLint with this project? … No / Yes
✔ Would you like to use `src/` directory with this project? … No / Yes
✔ What import alias would you like configured? … @/*

こちら完了後に、以下のコマンドを実行して開発サーバーを立ち上げると

$ npm run dev

next13-install

上のような画面になったら成功です。

新しい構成

ついでにアプリの構成についても確認してみましょう。

app ディレクトリ

新しく追加されたappをみてみると、以下のような構成になっています。

app
├── globals.css
├── head.tsx
├── layout.tsx
├── page.module.css
└── page.tsx

ここでの、それぞれのファイルは

globals.css : 全体のスタイルを決める CSS
head.tsx : ルートページの<head>要素を構成
layout.tsx: ルート間で共有されるコンポーネント
page.module.css : page.tsxで用いられるcss module
page.tsx : ルートに紐づけられたページ UI

です。

また詳細は次回以降述べていきます。

next.config.js

設定ファイルである、next.config.jsについても見てみましょう。

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

module.exports = nextConfig;

実験的な機能のappディレクトリが true になっていることがわかると思います。

それでは次回からこのプロジェクトをベースにルーティングやレンダリングの新機能について深掘っていきます ☕️

https://beta.nextjs.org/docs/installation

Next13の新しいappディレクトリ構成のセットアップ

インストール方法

新しい構成

app ディレクトリ

next.config.js