1. はじめに
「レンダリング手法の選択肢の多さ」や「環境構築の簡単さ」などから、近年人気が高まっているReactフレームワークNext.js。そのNext.jsはTypeScriptをサポートしており、より安全な開発を行うことが可能です。
そんなNext.jsとTypeScriptを用いてモダンなWebアプリを作成してみようと思います。
2. 環境構築
Next.jsではサーバーサイドでJavaScriptを実行するため、Node.jsのインストールが必須です。公式サイトからインストールできます。
ターミナルでnode -vを実行し、バージョンが表示されればOKです。
次に、Nextプロジェクトを作成します。
プロジェクトを作成したいディレクトリで、以下のコマンドを実行します。
npx create-next-app [プロジェクト名]
すると、色々聞かれますのでご自身のお好きなように設定しましょう。
私は以下のようにしました。
Would you like to use TypeScript? » Yes
Would you like to use ESLint? » Yes
Would you like to use Tailwind CSS? » No
Would you like to use 'src/' directory? » Yes
Would you like to use App Router? » Yes
Would you like to customize the default import alias (@/*)? » Yes
What import alias would you like configured? » ~/*
ESLint：構文エラーやコーディング規約をチェックすることができるツール
Tailwind CSS：CSSフレームワーク
App Router：Next.jsにおけるルーティングシステム
インストールが終わったらnpm run devコマンドを実行し、立ち上がったローカルサーバーにアクセスしてみます。
画像のように表示されれば、とりあえず環境構築は完了です。
3. おわりに
今回はNextプロジェクトを起動するための環境構築を行いました。
次回からは実際にコードを書いて、アプリを作って行こうと思います。