Next.js 12.3 リリース

Next.js 12.3
Next.js 12.2
Next.js 12.1
Next.js 12
1. 起動手順
Next.js 10
Next.js を学ぶのにおすすめの本

Next.js 12.3

「Next.js 12.3」がリリース CodeZine – 2022/9/13
https://codezine.jp/article/detail/16510

「Next.js 12.3」では、TypeScriptファイルがプロジェクトに追加された際に自動的に検出して、
必要な依存関係をインストールしてtsconfig.jsonファイルを追加する機能が追加された。

Next.js 12.2

「Next.js 12.2」がリリース CodeZine – 2022/6/30
https://codezine.jp/article/detail/16113

Next.js 12.2でStableになったMiddleware（Basic認証）のbetaからの主な変更点
https://zenn.dev/a_da_chi/articles/52bc6954f95191

Next.js 12.1

「Next.js 12.1」がリリース CodeZine – 2022/2/22
https://codezine.jp/article/detail/15601

Next.js 12.1の新機能オンデマンド ISRでページを手動再検証させてみた – 2022.4.7
https://dev.classmethod.jp/articles/next-js-12-1

Next.js 12

Next.js 12.0 が2021年10月27日にリリースされました。

Next.js 12 – Vercel 2021年10月27日
https://nextjs.org/blog/next-12

主な変更点は

・Rustコンパイラによるビルドの高速化
・React18対応

とかでしょうか。

Next.js 12は過去最大のリリースらしいです。

Next.js 12について本気出して和訳してみた – 2021年10月27日
https://zenn.dev/web_tips/articles/81a6db12f7cb2f

2021年からReactを始めるなら React Server Components 一択ではないか？ – 2021.10.28
https://zenn.dev/rgbkids/articles/7be28904623b30

起動手順

Getting Started
https://nextjs.org/docs/getting-started

% yarn create next-app --typescript

途中でプロジェクト名を聞かれるので test_next とかにしときます。

% cd test_next
% yarn dev

ブラウザで localhost:3000 にアクセスすると表示されます。

Next.js 10

React ベースのSSGフレームワークである Nextjs は、

2020年10月27日に、バージョン 10 になりました。

version 10 では以下の機能追加がありました。

コンポーネント追加/I18nルーティング対応/React 17対応/ import 文による外部CSSの読み込み対応

Next.js 4年目の知見：SSRはもう古い、VercelにAPIサーバを置くな
https://qiita.com/jagaapple/items/faf125e28f8c2860269c

Next.jsを使うべき5つの理由 + 実装Tips
https://qiita.com/Yuki_Oshima/items/5c0dfd8f7af8fb76af8f

React初心者に捧ぐNext.jsのススメ
https://zenn.dev/masayannuu/articles/187d448ef82401

入門者は基礎からしっかり理解Next.jsの基本(React)
https://reffect.co.jp/react/next-js

Rails API と login 連携

Rails を API サーバーとして next 上ではどうやってログイン機能を実現するか？

Rails API + React で作る SPA の認証方法について考えてみた
https://zenn.dev/tatsurom/articles/7cfaeecebd1e62379448

[Rails] devise token auth を使う
https://qiita.com/Masahiro_T/items/6bc49a625b437a7c2f45

Rails + Next.js + Firebase Authentication で認証付きアプリを作成する
https://qiita.com/kmgk0215/items/a174c6eef0a940ad03ea

Next.jsでログインフラグによるリダイレクト機能を実装してみた
https://qiita.com/YU-TA-9/items/d7244ffd09bda08ce8ce

Next.jsでログイン機能の実装 NextAuth.js
https://tech.mof-mof.co.jp/blog/next-auth-intro

Rails 6.1対応版: APIモードのRailsに対してCrossOriginなSPAからSession認証する方法
https://qiita.com/Y_uuu/items/1651b181f06499c5cede

JWTは使うべきではない　〜 SPAにおける本当にセキュアな認証方式〜
https://qiita.com/nyandora/items/8174891f52ec0ea15bc1

JWT とは
JWT（ジョット）とは JSON Web Token の略で、電子署名付きの URL-safe（URLとして利用出来る文字だけ構成される）な JSONのことです。
電子署名により、JSON の改ざんをチェックできるようになっています。

ざっくり言うと、改ざんできない JSON ということになります。

JWT について調べた内容をまとめました。
https://qiita.com/t-toyota/items/8d0ffb265845ab8cc87c

Jamstack とは？なぜ今 Jamstack なのか？ – 2021/08/19
https://dyno.design/articles/what-is-JAMstack

Netlify
Gatsby Cloud
Vercel
Firebase Hosting
GitHub Pages
とか

Jamstack用Fullstack Frameworkを試してみたけど時期尚早だと思った
https://www.ey-office.com/blog_archive/2020/11/13/tried-fullstack-framework-for-jamstack-but-it-was-premature

Jamstackって何なの？何がいいの？
https://qiita.com/ozaki25/items/4075d03278d1fb51cc37

What is Jamstack?
Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

The core principles of pre-rendering, and decoupling, enable sites and applications to be delivered with greater confidence and resilience than ever before.

For fast and secure sites | Jamstack

What is the Jamstack? Why use the Jamstack? How do I get started? Learn what the Jamstack is all about and why it's the ...

JamstackのJamはJavaScript/APIs/Markupの頭文字です

Active Recordから考える次世代のRuby on Railsの方向性
https://speakerdeck.com/yasaichi/directions-for-the-next-generation-of-ruby-on-rails-from-the-viewpoint-of-its-active-record

_app.tsxとは

pages/_app.tsx が生成されるのですが、

このファイルはなんでしょう？

_app.js(tsx)
Next.jsではAppコンポーネントを使用して全てのページを初期化するようになっています。そのため、このコンポーネントを継承したクラスがあるファイル、_app.js(tsx) を作成することでデフォルトのAppコンポーネントを上書きできます。

つまり、全ページで必要な処理をここに書くことができます。他にもAppコンポーネントでは以下のようなことができます

ページ間の共通レイアウトを持たせることができる
共通のstateを持つことができる
グローバルなCSS(全ページ共通の)を定義できる
componentDidCatchを利用したカスタムエラー処理
各Routeコンポーネントをラップするもの
ReduxのProvider設定をする

Next.jsでの_documment.js(tsx)・App.js(tsx)について爆速で理解しよう
https://qiita.com/Yuki-Kurita/items/6a0eae00999e1294a3b1

Next.jsのAppとDocumentとページはどんな順序で実行されるのか調べてみた – 2021年2月22日
https://tech.commmune.jp/entry/2021/02/22/125610

Next.js with TypeScript で最小限の _app.tsx, _document.tsx – 2020年2月8日
https://blog.anozon.me/ts-nextjs-pages

CSSについて

Next.jsにCSS Modulesを導入する
https://zenn.dev/catnose99/scraps/5e3d51d75113d3

“CSS Module” をめぐる混乱
https://zenn.dev/jxck/scraps/dc8780fd5b8ea6

一般に言う CSS Module の実装として支配的なのは webpack の CSS loader

GitHub - webpack-contrib/css-loader: CSS Loader
CSS Loader. Contribute to webpack-contrib/css-loader development by creating an account on GitHub.
github.com

特に next.js が推している

ただしもう deprecate されそう。

ただ、これも webpack として公式に決定した感じではないっぽい?
モチベーション高いメンテナが現れたりすると変わるんだろうか。
Next.js でも推してるし。