Next.jsをインストール
はじめに
Next.jsのインストール方法について説明をしています。
ここでは、TypeScriptとJavaScriptの２種類のインストール方法について説明をしていますが、今後では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：
Windows、MacOS、Linux
インストール
TypeScriptを使用した開発
TypeScriptでの開発を行う場合は、npx、またはyarnのコマンドでプロジェクトのインストールを行います。.png?w=641&h=242)
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@latestyarnを使用したインストール
$yarn create next-app