Published on

Next.js サンプルサイトの追加(前編)

Authors

4回に分けて作成をしてきた環境にはまだ Next.js のプロジェクトがないため、サンプルサイトを追加していきます。プロジェクトにコードを追加する形です。この手順は2回に分けて紹介をしていく予定です。今回は、まず Next.js のサンプルが動くところまで進めていきます。

Next.js のプロジェクトの追加

以前から提供されている jss のコマンドではなく、新しいプロジェクトを作る方法が 20.x から変更されました。今回は、この新しいコマンドを利用して Next.js のプロジェクトを作成します。

まずコードの管理は src の下で実装したいので、src のフォルダに移動をしてい、以下のコマンドを実行します。

npm init sitecore-jss
nextjs

どのフレームワークを利用するのか、の質問が表示されているため nextjs を選択して次に進めます。

nextjs

続いてフォルダの名前を聞いてきます。今回は、 C:\projects\Sitecoredemo.Docker\src\rendering に変更して実行します。続いてアプリの名前が表示されます。

nextjs

今回は sitecoredemo-jp とします。Sitecore のホスト名が表示されます。今回はローカルで動かす名前を cm.sitecoredemo.localhost にしているため、この値を設定します。

nextjs

GraphQL か REST にするのかの確認が表示されるため、GraphQL を選択します。

続いて SSG (スタティクサイトジェネレーター)なのか SSR (サーバーサイドレンダリング)の確認が表示されます。ここでは SSG を選択します。

nextjs

テンプレートのデータが必要かどうかが表示されます。サンプルのデータなどは今回は不要とするため、テンプレートのみが必要なためチェックせずに進めます。

nextjs

これでコマンドによる確認は終了となり、指定したディレクトリにデータが作成されて、 npm install が実行されます。しばらくするとテンプレートの完成です。

nextjs

追加の設定

Next.js のプロジェクトを見やすくするために、 Prettier という仕組みを利用しています。改行コードの違いなどでエラーになるケースも出てきます。これを避けるために、以下のファイルを追加します。

# Auto detect text files and perform LF normalization
* text=auto

これにより、今後新しいコンポーネントを追加した場合や、何らかのコードを別途利用するような際の改行コードの違いなどでエラーが発生するケースを避けることができるようになります。

まとめ

今回は Next.js のテンプレートをプロジェクトに追加するところまで紹介をしました。この状態ではまだ Sitecore にコンテンツがなく、Next.js にもサンプルのデータがないため動作しません。この部分の追加作業は、次回のポイントとなります。