About Next.js/TypeScript/ESLint/Prettier/Material-UI/styled-components Template.

Next.js/TypeScript/ESLint/Prettier/Material-UI/styled-components の自作テンプレートを作りました。

テンプレートは以下のコマンドでどなたでもご利用可能です。

yarn create next-app --example "https://github.com/kazuma-fujita/next-ts-lint-mui-template" sample-app

テンプレートには以下 package が含まれます。

TypeScript/ESLint/Prettier を個別に設定されたい方は以下ファイルをそれぞれ調整してください。

また、テンプレートに含まれるサンプルのソースコードはデフォルトで src ディレクトリ配下にあります。

ソースコードの import 文は src ディレクトリからの絶対パスで記述出来るように設定していますので、詳細はこちらの記事を参照ください。

自作テンプレート作成手順

ここからは自作テンプレートを作成した時の作業手順です。

備忘録として残しておきます。

yarn create next-app で今回公開する next-ts-lint-mui-template という名前の雛形を作成します。

今回はあらかじめ TypeScript が設定された with-typescript テンプレートを流用します。

yarn create next-app --example with-typescript next-ts-lint-mui-template

雛形が作成されたら、 yarn dev でアプリケーションを起動し、 http://localhost:3000 を開いて Next の初期画面が表示されることを確認します。

create next-app した初期状態では src ディレクトリがありません。

src ディレクトリを作成して他の階層を src ディレクトリに移動します。

この作業は好みですが、CRA で開発をする時は基本プロダクトソースコードを src ディレクトリ配下に置くので、慣例として実行します。

cd next-ts-lint-mui-template && mkdir src && mv components interfaces pages utils src/.

こちらに詳しい設定方法の記事を書きましたので参照ください。

こちらに詳しい設定方法の記事を書きましたので参照ください。

こちらに詳しい設定方法の記事を書きましたので参照ください。

Github に public repository を作成します。

今回は next-ts-lint-mui-template という名前にしました。

ローカルリポジトリにリモートリポジトリを追加します。

git remote add origin git@github.com.zuma:kazuma-fujita/next-ts-lint-mui-template.git

通常は git flow init などで develop ブランチを作成し、main ブランチ read-only にしますが、今回は割愛して直接 main に push します。

git push origin main

Github の public repository に置くだけでテンプレートの公開は完了です。