本日は前回のNext.js入門に引き続きNext.jsでプロジェクトを構造化する方法について解説していきたいと思います。
前回の記事はこちらとなります。
『Next.js』に適したフォルダ構造を自分で探したり、考えたりするのがごく一般的です。
Next.jsにはページレベルでの最適化が存在しますそれはプロジェクトをビルドした時、ビルドの一部としてログに記録されたページが表示されます。
すべてのコンポーネントファイルは『pages』ページとして処理をします。
ですので、ページに関係のないそれ以外のコンポーネントを『pages』のフォルダーに配置してしまうと、配置したコンポーネントを全てNext.jsがページとしてビルドをしてしまいます。
そうなればビルド時間が大幅に増加される事になります。
今回では、Next.jsを使用する個人開発または小規模でのチーム開発向けのフォルダー構造を紹介していき
自分に合った『ファイルとディレクトリ』の構造についての個人的な意見を共有を致します。
開発者と同じくらい多くのアプローチがあり、プロジェクトを構築するためのパスに従うか、いくつかの方法を組み合わせるかを選択が可能となります。
フォルダ構造
- public
- favicon.ico
- src
- core
- components
-layouts
-Layout.js
- events
- EventForm.tsx
- EventsActions.tsx
- constants
- theme.js
- page.js
- lib
- events
- hooks
- queries
- server
- pages
- api
- events
- [event].tsx
_ .eslintignore
_ .eslintrc
_ .env
_ babel.config.js
_ Dockerfile
_ jest.config.js
_ next.config.js
_ package.json
_ README.md
※上記の構成はあくまでも個人開発や小規模チーム用となります
ほとんどのNext.JSアプリケーションには、次のディレクトリまたは少なくとも一連のディレクトリがあります。
・静的ファイル『public /』
このディレクトリ内に配置されたファイルはすべてビルドのルートに転送されます。
これは通常では画像やテキストファイルなどの静的ファイルで機能致します。
public内のファイルは、ベースURL( / )から始まるコードで参照ができます。
実行時に追加されたファイルは使用ができませんのでご注意下さい。
『pages』ディレクトリ内にあるファイルと同じ名前の静的ファイルは使用ができません。
静的フォルダーを『public』内に配置し、すべてのアセットをバンドルおよび圧縮する利点を備えております。
・src
『src』フォルダーには、Next.jsアプリのすべてのソースファイルが含まれており
ここでほとんどのコードを記述していきます。
また『stories』、Next.jsフレームワークではなく、『Storybook』によって使用されるフォルダーも含まれております。
・core
『core』はAPIやドメインに関係のないすべてのものを配置していく場所となります。
データベース接続関数や再利用可能なUIコンポーネント・メール送信プロバイダーなどなど。
注意点はコアレイヤーはドメインレイヤーから何もインポートができません。
『core』の一部は、通常では外部ライブラリに抽象化できるものとなります。
コアドメインアプローチに従うことで、ユーティリティの再利用性が向上し、プロジェクト間での再利用が非常に簡単となり
選択したNRNプリセットに含まれている組み込みモジュールが含まれているので、これらはデフォルトで他のモジュールから分離されているため、独自のコードをより速く見つけることが可能となります。
• コンポーネント『components /』
すべての個々のコンポーネントを含むリポジトリページを構成するコンポーネントを配置します。
それぞれ個別のディレクトリにあります、つまり、Buttonコンポーネントがある場合は、「components / Button / index.js(x)」を作成します。
・ Layouts
ページで使用されるレイアウトが含まれています。
Next.jsでは、元々組み込みの『レイアウト』システムは付属しておりません。
レイアウト構成を強制しません、ですがガイダンスを提供します。
アプリでの複数のページで使用される要素(components)などで構成されレイアウトは、複数のページで使用されるメタコンポーネントを変更致します。
・ 定数『constants /』
モジュールを別々のディレクトリに含めることを好み
これは、関連するファイル(テスト、スタイル、ストーリーブックファイル)などを同じフォルダーに保持するためとなります。
通常では、テスト、スタイル、または追加のファイルを必要としないためこのディレクトリに、『constants /themes.js』や『constants / ui.js』などの定数グループごとにファイルを作成するだけです
・ lib
ここでは基本的にはコンポーネントではないドメインに関するものとなります。
クエリ、カスタムフック、コンテキスト、小道具での関数などです
現在のセッションを使用されているページに戻す関数である小道具を公開できます。
・ Pages『pages /』
このディレクトリは、サイトの一種の1対1の静的ルーターとして機能し各ページは『.js(x)』ファイルと一致します。
つまりPagesルートまたはページを配置するNext.js固有のフォルダーとなっております。
Next.jsのルーターはファイルシステムベースとなっております。
つまり構成はありませんすべて、このフォルダー内のページをどのように構成するかによって決まってきます。
ルートディレクトリファイル
ディレクトリのルートには、下記ようないくつかの構成ファイルとセットアップファイルがあります。
・eslintignoreおよび.eslintrc
・ .envファイル
・ babel.config.js
・ jest.config.js
・next.config.js
・package.json
・README.md
可能な構成ファイルはこれらだけではありません。
より複雑なシナリオで使用できる構成ファイルも沢山あります。
重要な事はデフォルトでは、環境変数はサーバー側のコードからのみ利用できるということです。
フロントエンドで変数を利用するには、接頭辞として『NEXT_PUBLIC_』を付けます。
NEXT_PUBLIC_APP_URL="https://example.com"
最後に
覚えておくポイントは、レイヤー間でのインポートに関するルールとなります。
多少ルールが厳しかったりもします。
『core』からインポートすることができない『lib』と『components』後者から『pages』をインポートしません。
『core』ルールにより、ドメインから分離され依存関係を回避し、アーキテクチャを解き放ちます。
フォルダー構造がユーザーとユースケースで適切に機能する必要があるという事になります。
柔軟性・予測が可能(ファイルを探してて、どこにある場合でも予測が可能であるか)・分離
分離はモジュール(例えばクラス・ファイルまたはコンポーネント)単一で処理していく必要性があります。
混在させないように抽象化とモジュール性の規則に従っていきます。
これらの方法を組み合わせるか、プロジェクト構築の為のパスに従いながらとなります。
本日は以上となります。
最後まで読んで頂きありがとうございました。
当ブログの記事が貴方のこれからの学習に役立つ事を願っております。