先日発表された Next.js 12 について、@spring_raining @uhyo_ @G4RDS の 3 人で話しました。

• https://nextjs.org/blog/next-12

Rust Compiler

• SWCの採用によるBabelからの脱却
  • https://swc.rs/
  • SWCの作者がVercelのNext.jsチームにJoin
  • SWCとesbuildの違い
• esbuild/Rollupとは別のエコシステムが誕生する可能性
• Babelを必要としない箇所はデフォルトでSWCを使ってコンパイルされる
  • 冒頭でopt-inで有効化と話していますがこれは誤りで、BundleやCompileはデフォルトでSWCが使われます
  • swcMinify: true でMinifyもSWCが実施するopt-in

Middleware

• Edge Functionsとの組み合わせが注目されるが、単体でも十分便利な機能
• Middlewareが動作するサンドボックス化されたランタイム環境について

React 18 SupportとReact Server Components

• 以前でもUIT INSIDEで取り上げたReact 18のアップデートや、React Server ComponentsがNext.jsで使えるように
  • ep. 89 『React 18 Alpha の新機能と私たちに試されるパラダイムシフト』 https://uit-inside.linecorp.com/episode/89
  • ep. 76 『React Server Componentsはサーバーサイドの新たなゲームチェンジャー？』 https://uit-inside.linecorp.com/episode/76
• React Server Componentsを使う場合、Next.jsの重要な機能 getStaticProps, getStaticPaths などが使えなくなる点に注意
• Next.jsがこれまで提供してきたSSRとは異なる、新しい方法としてのReact Server Components
  • ?__flight__ のついたURLでServer Componentsがstreamingされる
    • React Server Components 総まとめ: https://zenn.dev/g4rds/articles/287c53498d17a1
  • Component単位でのCache

URL Imports

• Native ESM時代にふさわしいURL形式での指定
  • 画像などもURLで指定可能
• next.lock という node_modules 外のディレクトリにキャッシュされる設計

その他のアップデート・気になるRFC

• AVIFによる画像最適化
• getServerSideProps をStreamingに対応させてPromise化するRFC: https://github.com/vercel/next.js/discussions/30051

Refs

• LINE 新卒採用 2023
  • https://linecorp.com/ja/career/newgrads/engineering/
• キャリア採用はこちらから
  • https://linecorp.com/ja/career/position/475
• BGM&SE
  • 魔王魂/騒音のない世界/OtoLogic

---

採用について

• LINEヤフー新卒採用
• LINEヤフー中途採用

使用素材・クレジット

• BGM&SE
  • 魔王魂
  • 騒音のない世界
  • OtoLogic