Learn next.js | Notion

https://github.com/takahiro-okada/nextjs-learn-nextjs

Chapter 1: Next.js の基本

Next.js の基本的なファイル構成について学習
- /app ディレクトリ
  - アプリケーションのルート、コンポーネント、ロジックを含む主要なディレクトリ
  - 主にこのディレクトリで作業を行う
- /app/lib ディレクトリ
  - 再利用可能なユーティリティ関数やデータ取得関数を格納
- /app/ui ディレクトリ
  - カード、テーブル、フォームなどの UI コンポーネントを格納
  - 事前にスタイリングされたコンポーネントを活用可能
- public/ ディレクトリ
  - 画像などの静的アセットを格納
- next.config.js ファイル
  - プロジェクトの設定を管理
  - create-next-app を使用して新しいプロジェクトを開始すると自動生成される
  - 基本的には変更不要
    - 自分がやったことあるのは画像を許可するドメインの設定
```
const nextConfig: NextConfig = {
 images: {
    domains: ['hoge.com'],
  },
};

export default nextConfig;
```

Chapter 2: Styling の基礎

Next.js でのスタイリング方法について学習
- Tailwind CSS
  - ユーティリティベースの CSS フレームワーク
  - クラスを組み合わせて効率的にスタイリング
- CSS Modules
  - コンポーネント単位でスコープが分離された CSS
  - ファイル名に .module.css を付けることで有効化
  - 他のスタイルと競合しない利点
- clsx ライブラリ
  - clsx は条件に応じてクラス名を動的に付け替えるのに便利なライブラリ
  - クラスの結合や条件分岐を簡潔に記述可能
  - 実際の使用例を交えた解説
  - tailwind-mergeを会社では使っています

Chapter 3: フォントと画像の最適化

カスタムフォントと画像の最適化について学習
- なぜフォントの最適化が必要なのか
  - レイアウトシフトが起こる可能性があり、Google から評価が悪くなる可能性があるから
  - next/fontを使うことで
    - フォントのロードを最適化
    - レイアウトシフトを防ぎ、パフォーマンスを向上させる可能性がある
  - next/imageも同様
- <Image>コンポーネントを使うと
  - 自動でレイアウトシフトを防ぐ
  - 画像サイズを調整
  - lazy loadingを付与
  - ブラウザがサポートしていたら、WebP や AVIF を使う
- <Image>タグを使った時の生成される DOM
```
<img alt="Screenshots of the dashboard project showing desktop version" loading="lazy" width="1000" height="760" decoding="async" data-nimg="1" class="hiddne md:block" srcset="/_next/image?url=%2Fhero-desktop.png&amp;w=1080&amp;q=75 1x, /_next/image?url=%2Fhero-desktop.png&amp;w=2048&amp;q=75 2x" src="/_next/image?url=%2Fhero-desktop.png&amp;w=2048&amp;q=75" style="color: transparent;">
```
  - webpになっていないと思ったけどnextworkで見たら配信は正しくwebpになっていた
    - このあたりの仕組みよくわかっていないマンです
  - imgタグと<image>コンポーネントの話

Chapter 4: Creating Layouts and Pages

Next.jsでのページのルーティングのルールについて
- page.tsxとlayout.tsx の考え方がある
  - page.tsxはページを作るファイル
    - app/page.tsx
      - /
    - app/dashboard/page.tsx
      - /dashboard/
  - layout.tsxはレイアウトを管理するページ
    - 共通のレイアウトを持たせたい時に使う
    - HeaderとFooterがサイト内で共通なのであれば次のように書ける
    - /app/layout.tsx
```
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={`${inter.className} antialiased`}>
        <Header />
        {children}
        <Footer />
      </body>
    </html>
  );
}
```
      - 上記のようなルートで行う以外にもDashboard専用の共通のレイアウトを持たせることができる（チュートリアルで紹介されている）

Chapter 5: Navigating Between Pages

next/linkの使い方
<Link>コンポーネントを使うと遷移先のページコードをバックグランドでプリフェッチするのでパフォーマンスが向上する
- 一方で不要なデータ通信が入るので対象が多いとoffにすることもあるらしい
  - https://zenn.dev/dozo13189/articles/72a8f087b382cf
```
<Link href="/dashboard" prefetch={false}>
  Dashboard
</Link>
```
usePathname()のhookについて
現在のURLを取得できるhookになる
- 相対パスで取得できる
  - http://localhost:3000/dashboard/invoices
    - →　/dashboard/invoices/
https://nextjs.org/docs/app/api-reference/functions/use-pathname

Chapter 6: Setting Up Your Database

Githubにリポジトリを作成する
Vercelのアカウントを作り、リポジトリを紐づける
Postgres databaseを作る
環境変数を.envにコピーする