0226

LOGS

  • 重い腰上げて Next.js の App Router に触れていく

  • とりまプロジェクトを作る

    > npx create-next@app@latest

# create-next-app@14.0.0
# Ok to proceed? (y) y
# 以下色々対話的に進める
#
# typescript yes
# eslint yes
# tailwind css no
# src/ ディレクトリ yes
# App Router yes
# import alias (@/*) yes
# ↑ 変更なし

> npm run dev
# http://localhost:3000

    • next はファイルシステムのルーティングを使っているので，

    • ファイルやディレクトリ構成がルーティングの定義していることを意味する

    • とりあえず `app ディレクトリを作れ（多分デフォでできている）
    • そして layout.tsx, page.tsx ファイルを作れ（これもできている）

    • app.tsx のみ以下に変更

      export default function Page() {
  return <h1>Hello, Next.js!</h1>;
}
      • 昔ながらの Pages Router を使いたい場合は，app ではなく，pages ディレクトリを作って，index.tsx にすれば良い
      • ほいで _app.tsx にレイアウトを記述する
      • 最後に pages ディレクトリに _document.tsx を作って，ここで サーバーからの初期応答を制御する

    • 戻って，.env 系のファイルは作られていないが，.gitignore をみた感じ .env*.local 作って開発するのね

    • Routing Files は把握しておいたほうが良さそう
      • 意味ごとにファイル定義が内部でされているので
      • Dynamic Routes は後で見る気がするのでここでは無視
      • その他諸々もあとだが，最後に SEO は把握しておく
    • 認証周りは公式の NextAuth があるのありがてぇ！
    • こっからは単なるリファレンスなだけだったので，あとは好きに作れと言う事か

  • ちゃうわ．learn があった

  • Chapter1

    • おい，こちらにテンプレートあったのか．

      > npx create-next-app@latest nextjs-dashboard --use-npm --example "https://github.com/vercel/next-learn/tree/main/dashboard/starter-example"
> cd nextjs-dashboard
> npn run dev
# http://localhost:3000
      • pnpm が良いなぁ
      • 開いたら，めっちゃレイアウト崩れてたんやが w
      • 次の章がスタイリングだったので大丈夫そう

  • Chapter2

    • グローバルスタイル
    • とりま，layout.tss に global.css をインポート
      • スタイリングの設定はすでに書かれている
      • 中身は tailwind のそれぞれのファイルを読み込んでいる
    • クイズ形式で途中途中に確認が入るの良いな

    • css modules の紹介

      • /app/ui に home.module.css を作る
      .shape {
  height: 0;
  width: 0;
  border-bottom: 30px solid black;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
}
      • /app/page.tsx で読み込んで使う
      import styles from "@/app/ui/home.module.css";
<div className={styles.shape} />;
      • こういう使い方もあるよということだが，今回は tailwind css のまま

    • 条件付きスタイリング

      • clsx というライブラリを使う
      • 以下参考コードを抜粋（className="" の中に書く）
        clsx("共通設定", {
"bg-gray-100 text-gray-500": status === "pending",
"bg-green-500 text-white": status === "paid",
});
      • おい，clsx デフォでインストールされてたんかーい！

-

results matching ""

    No results matching ""