Next.js 入門者のメモ

Next.js の基本のキを体得しようと思って https://nextjs.org/learn を上から下までやった。いちおう書かれてことは理解できているとは思うけど、不注意もあってちょいちょいクイズで不正解を出していてウケる…。

About Next.js

Next.js is a React framework that gives you building blocks to create web applications.

From JavaScript to React

• JavaScript はそれなりに書いたことがあるので、ここはスッと
• DOM のことも知っているよ
• 命令的プログラミング と 宣言的プログラミング
• JSX
• React コアコンセプト
  • Components
  • Props
  • State
• useState なるほどね
  • 例 const [likes, setLikes] = React.useState(0);

From React to Next.js

• 素の HTML の出番が減って、まるごと JavaScript になっていく感じね

How Next.js Works

• Development と Production のモードがあるよ
• Next.js には Rust で書かれたコンパイラがあるよ
  • SWC https://swc.rs/ ってやつを使っている
• 3 種のレンダリング牛丼
  • Server-Side Rendering
  • Static Site Generation
  • Client-Side Rendering.
• ちらっと useSWR の話があった
  • https://swr.vercel.app/
• Hydration についての説明あり
  • 日本語だと「水和」になる？
  • 日本語で理解しようとしてもむつかしいから Hydration で覚えた方がよさそう

Create a Next.js App

• サンプルプロジェクトを落としてきてピッとサーバが立ち上がるの気分いい
• ファイルを編集したらすぐに表示に反映されて気分いい

Navigate Between Pages

• pages ディレクトリなるほどね
• Link コンポーネントなるほどね
• ウェブブラウザの DevTools を触らせて「ほらね？」とわからせるのいい

Assets, Metadata, and CSS

• public ディレクトリは Rails といっしょと思っておけばいいかな
• Image コンポーネントなるほどね
• Head コンポーネントなるほどね
• Script コンポーネントなるほどね
• Layout コンポーネントなるほどね
  • これは提供されているものというよりは、プラクティスとして紹介されている？
• className={styles.container}
  • HTML 要素へのクラス付けはこういうふうにやるのね
• pages/_app.js っていう特別扱いのファイル
  • アプリケーション全体に適用したいグローバルな CSS はここで読み込ませる
    • そうすることで管理しやすくする
  • こいつを変更したらサーバを再起動しないと反映されない
• clsx っちゅうライブラリがあるのね

Pre-rendering and Data Fetching

• Pre-rendering なるほど
  • ウェブブラウザの設定で JavaScript を無効化してアクセスすると、なにが起きるかわかっておもしろい
• 2 種の Pre-rendering 牛丼
  • Static Generation
  • Server-side Rendering
• Pre-rendering をどうするかはページごとに設定できる、便利
  • このへんが、従来の「ウェブアプリケーション開発フレームワーク」との大きな違いという印象
• getStaticProps なるほど
  • この形で抽象化しているのね
  • どこからデータを取ってくるのか、ファイルシステムでもデータベースでも外部ソースでもよい
• getServerSideProps なるほど
  • Server-side Rendering したいとき用
• Client-side Rendering するなら SWR を使ってくれ、とのこと

Dynamic Routes

• ここまでの内容は pages ディレクトリにファイルを置く Static Routes だったってこと
• pages/posts/[id].js というファイルを置いて、中にロジックを書く
  • Rails でいうと Router / Controller / View あたりに分かれている処理

API Routes

• pages/api 以下にファイルをつくる

Deploying Your Next.js App

• Vercel のご紹介