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 <span data-wikilink="5"></span> = 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/<span data-wikilink="14"></span>.js というファイルを置いて、中にロジックを書く
  • RailsでいうとRouter / Controller / Viewあたりに分かれている処理

API Routes

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

Deploying Your Next.js App

• Vercelのご紹介