はじめに
フロントエンドのフレームワークは業務ではAngular,趣味ではReactを触ることが多い。フロントエンドは技術の入れ替わりが激しいため、定期的に新たな技術に触れるようにしている。サーバサイドレンダリングなどの技術にも触れてみたく、Next.jsを調べていたところ、良さげなチュートリアルがあったのでこちらを進めながら記事を執筆することで理解を深める。
本記事の前提のバージョン
概要
PJのフォルダ構成について紹介されている。PJを作成するときにまず悩むところなので、日本語に翻訳したものを載せておく。多分これがベストプラクティスなのかな。
そのほかは開発サーバの起動コマンドやTypeScriptのすすめなどが記載されていた。
PJ構成
•
/app: アプリケーションのすべてのルート、コンポーネント、およびロジックを含んでいます。ここが主に作業する場所です。•
/app/lib:アプリケーション内で使用される関数を含みます。再利用可能なユーティリティ関数やデータ取得関数などが含まれます。•
/app/ui:アプリケーションのUIコンポーネントが含まれており、カード、テーブル、フォームなどがあります。時間を節約するために、これらのコンポーネントには予めスタイルが適用されています。•
/public: アプリケーションの静的アセット（画像など）をすべて含みます。•
/scripts: 後の章でデータベースを作成するために使用するシードスクリプトが含まれています。• Config Files: また、アプリケーションのルートには、
next.config.jsなどの設定ファイルもあります。これらのファイルのほとんどは、create-next-appを使用して新しいプロジェクトを開始するときに自動的に作成され、事前に設定されています。このコースでは、これらのファイルを変更する必要はありません。学び
Atomicデザインなどコンポーネントの配置は色々な流派があるし、現場で採用されているものも様々。/app/uiに画面のデザインに関するtsxを作成して、/appにはロジックや/app/ui配下にあるコンポーネントをimportするような構成であれば、/app配下のフォルダでコンポーネントの構成を把握して、詳細は/app/ui配下を見に行くのような整理がされて、PJ全体の見通しが良くなると思った。バックエンドのREST APIのサーバと接続するときは、データフォルダやバックエンドのAPIを呼び出す共通のServiceクラスが作りたくなるかもとは思った。