SEの部屋

Next.jsをインストール

はじめに

Next.jsのインストール方法について説明をしています。
ここでは、TypeScriptとJavaScriptの2種類のインストール方法について説明をしていますが、今後ではTypeScriptを使用した開発を行っていくため、JavaScriptの開発については参考にする程度にしてください。
TypeScriptを使用するメリットは下記のとおりです。

  • 型の厳密なチェックが可能

TypeScriptは、JavaScriptに厳密な型を導入することができます。これにより、コードの品質を向上させ、開発中のエラーを事前に検出することができます。

  • コードの読みやすさが向上

TypeScriptは、JavaScriptに比べて型の情報が明確になるため、コードの読みやすさが向上します。また、型定義によって、関数の引数や戻り値の型を明確にすることができるため、コードの可読性が高まります。

  • メンテナンス性が高い

TypeScriptは、型によるチェックによって、コードの品質を維持することができます。また、エラーが事前に検出できるため、バグを見つけることが容易になります。これにより、コードのメンテナンス性が向上します。

  • Next.jsとの親和性が高い

Next.jsは、TypeScriptのサポートを積極的に行っており、TypeScriptを使用したプロジェクトの作成が簡単になっています。また、Next.jsには、TypeScriptを使用するための設定が用意されているため、導入が容易です。


これらのメリットから、Next.jsでTypeScriptを使用することで、コードの品質やメンテナンス性を向上させることができます。また、開発者間のコミュニケーションを促進し、コードの品質を維持することができます。

システム要件

  • Node.jsのバージョン:v14.6.0
  • OS:WindowsMacOSLinux

インストール

TypeScriptを使用した開発

TypeScriptでの開発を行う場合は、npx、またはyarnのコマンドでプロジェクトのインストールを行います。

npxを使用したインストールの手順

  • npm create-next-app@latest --ts を実行します。
$npx create-next-app@latest --ts
  • パッケージを確認されますが、そもままエンターを押下してください。
Need to install the following packages:
  create-next-app@13.1.6
Ok to proceed? (y) 
  • プロジェクト名を指定してください。プロジェクト名のディレクトリが生成されます。
✔ What is your project named?
  • ES Lintを使用するか確認されます。使用する場合は、Yes、使用しない場合はNoを選択してください。
✔ Would you like to use ESLint with this project? 
  • "src/"ディレクトリでプロジェクトを管理するか聞かれていますが、今回はNoを選択。
✔ Would you like to use `src/` directory with this project? 
  • "app/"内でプロジェクトを管理するかについて聞かれていますが、構成の管理上Noを選択。
✔ Would you like to use experimental `app/` directory with this project?
  • インポートするエイリアスを確認されますが、何も記入せずにエンターで大丈夫です。
✔ What import alias would you like configured? … @/*

yarnを使用したインストール手順

  • yarn create next-app --typescriptを実行します。
$yarn create next-app --typescript
  • アプリ名(新しく作成されるプロジェクトのディレクトリ名を記入)
✔ What is your project named? 
  • ESLintを使用する場合は、Yesを選択、使用しない場合は、Noを選択。
✔ Would you like to use ESLint with this project? … No / Yes
  • "src/"ディレクトリでプロジェクトを管理するか聞かれていますが、今回はNoを選択。
✔ Would you like to use `src/` directory with this project? … No / Yes
  • "app/"内でプロジェクトを管理するかについて聞かれていますが、構成の管理上Noを選択。
✔ Would you like to use experimental `app/` directory with this project? … No / Yes
  • インポートするエイリアスを確認されますが、何も記入せずにエンターで大丈夫です。
✔ What import alias would you like configured? … @/*



JavaScriptを使用した開発

npxを使用したインストール

$npx create-next-app@latest

yarnを使用したインストール

$yarn create next-app