App Routerのディレクトリについてつらつら書く

[pss-aileen]

ちょっと情報整理をかねてこちらにつらつら書いてみます

---

• コンポーネントとして切り出せるものは切り出して componentsディレクトリに入れる
• page.tsx に書く、そのページ独自のテキストや繰り返さないものはコンポーネントにしなくても良い

というのが今時点の認識。
それをもとに考えるとディレクトリについての考え方が落ち着いてきそう

[pss-aileen]

サンプルとなるようなもの

• 調査データ探し
  • https://vercel.com/templates

[pss-aileen]

• Next.js App Router Playground – Vercel
  • Routerのあれこれが試せる？例を見れるやつ
  • まったく理解していない

[pss-aileen]

leerob/leerob.io: ✨ My portfolio built with Next.js, Tailwind, and Vercel.

• tailwindcssはそのまま書いている感じ
• フォントぐらいしかconfigに設定しない

[pss-aileen]

関係ないけど気になったもののリンク

• Conventional Commits
  • コミットメッセージの書き方、人間と機械が読みやすく、意味のあるコミットメッセージにするための仕様

[pss-aileen]

「コンポーネント」とは何か、コンポーネントとして書き出すものは何が適切か？

[pss-aileen]

• page.tsxに書いても良いもの（別に切り分けなくても良いもの）
  • TOPページ特有のコンポーネント
    • ヒーローエリア、ABOUTセクション
    • TOPページがもっと長くなって、セクションを使い回す場合はコンポーネント化した方が良い？という認識
      • Blazity/next-enterprise
        • app/page.tsx にそのページだけで表示させる内容はそのまま書いている
• layout.tsx から切り離してコンポーネント化するもの
• ヘッダー
• フッター
• 今は量が少ないので↑を切り離さなくても良いかな、とも思うけど
• これらは切り離した方が良いと思っている。ただ、具体的に理由を説明できない

[pss-aileen]

そもそも

• layout.tsx
  • 全てのディレクトリに継承できるレイアウト
• page.tsx
  • TOPページの内容（各ページで表示される内容を記述する）
  • HTMLでいう、index.htmlの内容
  • コンポーネント化するというのは、HTMLの中でも使い回すものをコンポーネント化して再利用しやすくするためにある、はず？
  • なので、コンポーネントとして切り分けるのは「再利用するもの」といった認識がよいのか

[pss-aileen]

• steven-tey/precedent: An opinionated collection of components, hooks, and utilities for your Next.js project.
  • これも app/page.tsx にTOPの内容がそのまま書き込んである
  • componentsは繰り返して使用したいものが使われている模様
  • layoutのフォルダ構成参考になるかも
  • 

[kazzyfrog]

自分もこの前App Routerのディレクトリ構成色々調べたので、後でつらつら書きます！

[kazzyfrog]

以前書いた分かりずらいメモだけ、一旦貼り付けておきますw

ディレクトリ構成

Shadcn/uiに合わせて、プロジェクトファイルをappの外部に保存するパターン

そして、appディレクトリ内は3つの階層に分かれています：

1. Next.jsのメタデータファイル
2. 基本的なサイトのページ構造
3. コロケーションの概念

以下のようになります：

    1   2   3

├─app
|   ├─(pages)
|   |   ├─(root)
|   |   │   ├─page.tsx
|   |   │   ├─_components
|   |   │   │   └─componentA.tsx
|   |   │   └─_types
|   |   |       └─types.ts
|   |   ├─pageA
|   |   |   ├─page.tsx
|   |   |   ├─_components
|   |   |   │   └─componentB.tsx
|   |   |   └─_types
|   |   |      └─types.ts
|   |   └─layout.tsx
|   ├─error.tsx
|   ├─layout.tsx
|   ├─loading.tsx
|   └─not-found.tsx
|
├─components
|   ├─navbar.tsx
|   └─ui
|     └─button.tsx
├─libs
|

[kazzyfrog]

ページ数が少ない・規模が小さい場合は、appと同じ階層にcomponents フォルダを用意するだけで良さそうです！
各ページディレクトリの中の_componentsは、複雑になってきてからで！

[pss-aileen]

Reactとは

コンポーネントを作成、ページで組み合わせられる

React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps.

訳: Reactは、個々の部品を「コンポーネント」と呼ばれるもので構築することで、ユーザーインターフェースを構築することができます。Thumbnail、LikeButton、Videoのような独自のReactコンポーネントを作成し、それらを画面、ページ、アプリ全体に組み合わせることができます。

画面上に表示される要素を作るためライブラリ、UIコンポーネントを作るためのツール

React is a JavaScript library created by Facebook
React is a User Interface (UI) library
React is a tool for building UI components

訳:

• ReactはFacebookによって作られたJavaScriptライブラリ
• Reactは、UI（ユーザーインターフェース）ライブラリ
• Reactは、UIコンポーネントを作るためのツール

意味

• UI とは
  • User Interface
  • 画面上に表示されるボタンやメニュー、フォーム、ユーザーが操作する部分全体

Next.jsとは

GPTより

Next.jsは、Reactアプリケーションのフレームワークであり、ページベースのルーティングやサーバーサイドレンダリングなどの機能を提供します。Next.jsを使用すると、Reactコンポーネントを使ってページのUIを作成し、それをページコンポーネントとしてエクスポートすることができます。