はじめに
Next.jsはReactベースのフレームワークで、静的サイト生成(SSG)はもちろん、サーバーサイドレンダリング(SSR)も簡単に実装できるように設計されており、クライアントからサーバまでこれ1つで完結するフレームワークになっています
この記事では、Next.jsのインストール方法について詳しく説明し、チュートリアルを紹介します。
Next.js13でのページとAPIのファイル名とディレクトリの命名
自動インストール
Next.jsの新しいアプリケーションを作成する際には、`create-next-app`を使用することを推奨します。この方法は、プロジェクトを自動的にセットアップしてくれます。
npx create-next-app@latestインストール時に以下のプロンプトが表示されます:
What is your project named? my-app
Would you like to use TypeScript? No / Yes
Would you like to use ESLint? No / Yes
Would you like to use Tailwind CSS? No / Yes
Would you like to use `src/` directory? No / Yes
Would you like to use App Router? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*プロンプトに従って選択を行い、create-next-appがプロジェクト名のフォルダを作成し、必要な依存関係をインストールします。このセットアップにより、Next.jsはTypeScript、ESLint、Tailwind CSSの設定をデフォルトで提供しています1。
手動インストール
手動で新しいNext.jsアプリを作成するには、必要なパッケージをインストールします:
npm install next@latest react@latest react-dom@latestインストールするとpackage.jsonファイルが以下のようなscriptsが記述されています。
{
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}このコマンドで起動やビルド、ソースの性的解析などを行ってくれます
dev: 開発モードでNext.jsを開始するためにnext devを実行します。
build: 本番用にアプリケーションをビルドするためにnext buildを実行します。
start: Next.jsの本番サーバーを開始するためにnext startを実行します。
lint: Next.jsの組み込みESLint設定をセットアップするためにnext lintを実行します1。
まとめ
Next.jsのインストールは非常に簡単で、`create-next-app`を使用することで自動的にプロジェクトをセットアップできます。手動インストールも可能で、必要なパッケージをインストールし、`package.json`に適切なスクリプトを追加することで設定できます。これで、Next.jsのインストール方法と基本的なチュートリアルコードについての概要を説明しました。
