Zenn
🐾

【学習ログ】Next.jsについて

2022/07/15に公開
Next.js
idea

ディレクトリ構成

.
├── .next
│   └── cache...
├── node_modules
│   └── @babel...
├── pages
│   ├── api
│   │　  └── hello.js
│   ├── _app.js
│   └── index.js
├── public
│   └── favicon.ico...
├── styles
│   ├── globals.css
│   └── Home.module.css
├── eslint.json
├── next.config.js
├── package.json
└── yarn.lock

各フォルダの概要

  • .next: コンパイル後のファイルが入る場所
  • pages: ファイルシステムルーティングの根幹※
  • public: 静的なファイル（アイコン、画像）

CSSmoduleについて

import classes(何でもよい) from "ファイルパス";

className = {classes（importの時に指定した名前）.<クラス名>}
  • 使えるのはクラスセレクターのみ
  • コンポーネントごとにCSSファイルも分けた方がわかりやすい
  • グローバルなものを呼び出せるのは_app.jsだけ

Linkコンポーネントについて

import Link from "next/link";

<Link href = "/">
    <a>Index</a>
</Link>
  • Linkコンポーネントはプリフェッチ

ルーティングについて

_app.jsxファイル

役割がいろいろある

  • ページが変わってもレイアウトを維持する
  • ページ移動時の状態の保持
  • componentDidCatchを用いたカスタムエラー処理
  • ページへの追加データの注入
  • グローバルCSSの追加

pagesの中のファイルは１番親なので、<></>を使ってよい

その他参考

pagesのファイルで使うexportはdefault exportでないとダメ
ファイルシステムルーティングの関係

localhost:3000にアクセスして見られるページはindex.js
pagesフォルダ内のxxx.jsにアクセスするには、localhost:3000/xxxにアクセスする

開発用コマンド: yarn dev 基本こっち
本番用コマンド: yarn build + yarn start

Discussion