レッドインパルスのたかけんです。
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 Extentions
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のチュートリアルをやりたい人などは、ぜひ使ってみてください！