レッドインパルスのたかけんです。
REDIMPULZ Advent Calendar 2020 の2日目のエントリーです。

ReactとNext.jsの解説動画

弊社のYouTubeチャンネルでは、ReactとNext.jsの解説動画を公開しています。

動画では、Next.jsの公式のチュートリアルをベースに解説をしています。
また型情報についても解説した方が理解が深まると思い、TypeScriptを導入しています。

しかし、公式のチュートリアル手順で作成されたプロジェクトにTypeScriptやESLint等のツールを導入するのが若干手間なので、設定を加えたNext.jsのテンプレートを作成しました。

今回は、その作成したテンプレートの紹介になります。

nextjs-typescript-starter

TypeScriptの設定以外に、ESlintやPrettier、VScodeの拡張機能の設定も入れています。
テンプレートからプロジェクトを作成し、VScodeで開けば、TypeScriptやESlintで快適に開発できるようになっています。

元々の公式のテンプレートにあまり手を加えていないシンプルな設定になっています。
これらの設定に加えて、haskyやjestなどが導入されているテンプレートからプロジェクトを作成したい方は、他に有志の方が公開しているテンプレートがあるので、そちらの利用も検討してみてください。

Next.jsの公式のチュートリアルと同じように使えます。
以下、create-next-appでプロジェクトを作成し、開発サーバーを起動する手順です。

$ npx create-next-app app --example "https://github.com/redimpulz/nextjs-typescript-starter"
$ cd app
$ yarn dev

TypeScript導入済みのシンプルなNext.jsのスターターテンプレートを紹介しました。

設定の記述量も最低限にしているので、分かりやすいかと思います。
TypeScriptでNext.jsのチュートリアルをやりたい人などは、ぜひ使ってみてください！