create-next-app with template

はじめに

ウェブ開発をする際に使用する技術は常に異なることが一般的ですが、それでも開発者ごとに常に使用する設定があります。私の場合、多言語はi18nを使用し、APIキャッシュはReact Queryを使用しています。プロジェクトを最初に設定する際には思ったよりも多くの時間がかかることがよくありますが、こうした設定を事前にテンプレート化しておくと時間を節約し、初期の試行錯誤を減らすことができます。

どのように使用するのか？

Next.jsを使用している開発者であれば、create-next-appコマンドをご存知でしょう。公式ドキュメントで提供されている機能ですからね。このコマンドを使用すると、プロジェクト名、TypeScriptの使用の有無などを簡単に設定することができます。

npx create-next-app

そして、ドキュメントを詳しく見てみると、今日お話しするexampleオプションを見つけることができます。

repo urlをオプションとして一緒に書いておけば、そのまま構成をしてくれます。事前によく使用する設定をGithubにpushしておき、repoのurlを一緒に入力すれば時間を節約することができます。

使用例

単純な機能ですが、私のように小さなプロジェクトを続けて作成する開発者にとっては特に便利です。Next.jsもここで多くのテンプレートを提供しています。以下のような形でテンプレートを生成することができます。

形式

npx create-next-app -e <Github URL>

例

npx create-next-app -e https://github.com/danver-io/template-danver-web

さらに進んで

これだけでも十分ですが、もしかして複数のテンプレートを持っている場合は良い方法があります。公式リポジトリを見ると、1つのリポジトリ内に複数のテンプレートがあります。Githubにテンプレートリポジトリを作成し、フォルダごとに独自のテンプレートを追加してみてください。例えば、SPA（Single Page Application）、モバイルアプリなど、多くのテンプレートを作成しておくことができるでしょう。この場合は --example-path [path-to-example] オプションを追加すれば良いです。

形式

npx create-next-app -e <Github URL> --example-path <Path>

例

npx create-next-app -e https://github.com/vercel/next.js --example-path examples/blog

実行結果