こんにちは。
今回はReactベースのフロントエンドフレームワークである、Next.jsの導入方法について紹介します。
NextJSの導入方法
NextJSの公式のセットアップ方法に従って導入していきます。
なお非公式ではありますが日本語訳されたサイトもあるので、そちらを参照されてもいいかもしれません。
導入には自動セットアップとマニュアルセットアップの2種類の方法があります。
自動セットアップ(Automatic Setup)
自動セットアップの場合はターミナルで以下のコマンドを入力することで全て完了します。
npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app
通常のNext.jsを入れた場合使用できるのはJavaScriptです。
もしTypeScriptを使用したい場合は上記のコマンドに--typescriptフラグをつけることで、使用可能になります。
npx create-next-app@latest --typescript
# or
yarn create next-app --typescript
# or
pnpm create next-app --typescript
マニュアルセットアップ(Manual Setup)
上記の自動セットアップに頼らず、手動で最低限のパッケージを行いたいこともあるかと思います。
その際には以下の流れで行います。
- 最低限のパッケージ導入
scriptsの設定index.jsを追加
1. 最低限のパッケージ導入
導入するプロジェクトにnext, react, react-domをインストールします。
自動セットアップの時と同様に、コマンドで導入を行います。
npm install next react react-dom
# or
yarn add next react react-dom
# or
pnpm add next react react-dom
2. scriptsの設定
次にpackage.jsonを開いて、scriptsに以下の設定を追加します。
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
このスクリプトを設定することで、ターミナルを用いてNext.js CLIを動作させることができるようになります。
各項目の動作については以下のようになります。
"dev": "next dev"next devはターミナルでdevコマンドを入力した時に、Developmentを起動します。
"build": "next build"next buildはターミナルでbuildコマンドを入力した時に、Buildを起動します。
"start": "next start"next startはターミナルでstartコマンドを入力した時に、Productionを起動します。
"lint": "next lint"next lintはターミナルでlintコマンドを入力した時に、Lintを起動します。
3. index.jsを追加
プロジェクトのpagesディレクトリの中にindex.jsを追加し、以下を記載します。
function HomePage() {
return <div>Welcome to Next.js!</div>
}
export default HomePage
以上の手順を踏むことで、最低限のパッケージを導入したNext.jsの環境が作れるかと思います。
導入後の確認
セットアップの後は正常に完了しているかを確認しましょう。
- ターミナルから
npm run devoryarn devorpnpm devを入力してテストサーバーを起動します。 - この時のコマンドの接頭語は、インストールした時に使用したものと一致させましょう。
- テストサーバーを起動すると
http://localhost:3000が立ち上がっているはずですので、ブラウザでアドレスを入力して確認します。 - 正常にアクセスすることができればセットアップは成功です！
おわりに
今回はNext.jsのセットアップ方法について紹介しました。
セットアップが完了した後は、ESLintやPrettierを導入するかと思います。この二つの導入方法についてはこちらの記事にて解説していますので、参考になれば幸いです。
最後までお読みいただきありがとうございました。