Next.js 12 リリース

frontend

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

Next.js 12

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

ポルノグラフィティ『幸せについて本気出して考えてみた』 – 2013/9/25

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

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

% cd my-next-project
% 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用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 best approach for building faster, more ...

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

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

特に next.js が推している

ただしもう deprecate されそう。

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

Next.js が CSS Modules を推奨する真相に迫りたい
https://zenn.dev/takepepe/scraps/6668e9fe402666

Next.js 9.2 から CSS Modules がビルトインサポート対象になった。

堅牢なCSSをReactに手軽に実装できるstyled-jsx
https://inside.dmm.com/entry/2018/05/14/react-styled-jsx

styled-jsx 「妥協なしの完全な CSS in JSX」
https://qiita.com/ygkn/items/c809e41217ea7e81cb9a

styled-componentsを使ったCSS設計
https://qiita.com/taneba/items/4547830b461d11a69a20

styled-components
https://styled-components.com

styled-components – GitHub
https://github.com/styled-components/styled-components

styled-components(CSS in JS)をやめた理由と、不完全なCSS Modulesを愛する方法
https://qiita.com/jagaapple/items/7f74fc32c69f5b731159

SassからCSS Modules、そしてstyled-componentsに乗り換えた話
https://note.com/tabelog_frontend/n/n2541778b81e3

Vue.js & Nuxt.js から React & Next.js へ移行した理由
https://fwywd.com/tech/nuxt-to-next

Vercelとは

気軽に Next.js をデプロイできるクラウドサービスです。

Vercel の料金形態と内容についてまとめた – 2020冬
https://zenn.dev/lollipop_onl/articles/eoz-vercel-pricing-2020

Next.js を学ぶのにおすすめの本

React.js&Next.js超入門 第2版

タイトルとURLをコピーしました