0. 初めに
emonです。
本記事では、Reactアプリを構築する上で人気の高いNextjsを用いた環境構築を公式サイトで推奨されているcreate-next-appを使用して行います。create-next-appすることで、簡易的に構築することができ依存ライブラリの設定なども行なってくれます。
■ 本記事での目標
誰でもNextjsの環境を構築し、動作確認ができる
1. セットアップ
# npx
npx create-next-app@latest
# yarn
yarn create next-app
作成したいディレクトリに移動し上記のコマンドをどちらかを実行させます。
オプションを使用して一度に全ての設定をすることができますが、今回は対話型で進めていきます。
Need to install the following packages:
create-next-app@13.4.1
Ok to proceed? (y) y
こちらは導入するバージョンを確認します。
今回は、13.4.1を使用します。NextjsやReactなどのライブラリは最新のものが使用されます。create-next-appを使用する場合は、バージョン指定は出来なさそうです。。。(GitHubのissue)
もしバージョンを指定したい場合は、create-next-appを使用しないかセットアップ完了後指定のバージョンをインストールし直すことで解決できます。
? What is your project named? › sample
ここでプロジェクトの名前を設定します。今回は、sampleという名前にします。
? Would you like to use TypeScript with this project? › No / Yes
TypeScriptを使用するかを設定します。
? Would you like to use ESLint with this project? › No / Yes
ESLintを使用するかを設定します。
ESLintはJavaScript,TypeScriptで静的解析を行うライブラリ（公式サイト）でコード規則を設定することができます。
✔ Would you like to use Tailwind CSS with this project? … No / Yes
Tailwindを使用するかを設定します。
Tailwindは、cssフレームワークでutilityClassを設定し、デザインを行なっていきます。
■使用例
export default function Home() {
return (
<h1 className="text-3xl font-bold underline">
Hello world!
</h1>
)
}
✔ Would you like to use `src/` directory with this project? … No / Yes
srcディレクトリを追加するかを選択できます。
Yesを選択した場合、設定ファイルや静的ファイルなど以外はsrc配下に生成されます。
✔ Use App Router (recommended)? … No / Yes
こちらは、Nextjsのバージョン13より導入されたAppディレクトリの機能を使用するかです。APPディレクトリを使用することでサイト構成とフォルダ構成を統一することができるだけでなく、品質の向上にも繋がります。
✔ Would you like to customize the default import alias? … No / Yes
? What import alias would you like configured? › @/*
こちらを有効することで、外部ファイルを指定する際にプロジェクトディレクトリをルートディレクトリとして扱いファイルパスを指定することができます。今回は、ファイルパスの先頭に@/と指定するとプロジェクトディレクトリとなるようにします。
■使用例
// before
import { Button } from '../../../components/button';
// after
import { Button } from '@/components/button';
2. 動作確認
# npxでセットアップした場合
npm run dev
# yarnでセットアップした場合
yarn dev
上記のコマンド実行後、初期画面が表示でされます。
3. 最後に
次回は、ページの編集やAPIの作成などを記載しようと思います。
最後まで読んで頂いてありがとうございました。