Next.jsのPPR + StreamingがVercelで実行されるときの全体像を掴む

2024/09/29 10 users イントロダクション オリジン PPR streaming 一方

こんにちは。sumirenです。 イントロダクション 先日、Next.js 15 RCが出ました。App RouterでPartial Prerenderingが広く使われ始める日も近いのではないでしょうか。 一方で、Partial Prerenderingは、特にStreamingと一緒に利用した場合、部分的な静的レンダリングといったアプリレイヤから、エッジとオリジンの使い... 続きを読む

Next.js って App Router が出てきて平和じゃなくなったよね

2024/07/22 154 users Next.js ベストプラクティス みな 前提 背景

背景 Next.js に App Router が導入されてから1年近くが経ちました。しかし、未だに App Router を前提として設計のベストプラクティスが定まっておらず、身近なフロントエンドエンジニアはみな「まだプロダクトに取り入れるには考えることが多いよね」という共通認識のまま止まっているような気がしています。 また、Ap... 続きを読む

React Server Componentsを理解したい

2024/06/27 74 users React Server Components RSC

はじめに App Router はこれまでの React や Pages Router による書き方と大きく異なります。これは、React Server Components（RSC） というアーキテクチャが導入され、開発の考え方が大きく変化したからです。そのため、App Router を理解するためには RSC の理解が必要になります。 しかし、私は RSC の理解に苦戦し... 続きを読む

Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita

2024/05/11 58 users Qiita shadcn RSC Reactコンポーネント

Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも... 続きを読む

App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement

2024/04/01 11 users 移行 改善

フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/ 続きを読む

実践Next.js - App Router への理解を深めるために -

2024/02/28 28 users 本稿 刊行 Next.js サンプルコード 書籍

Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています... 続きを読む

プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話

2024/02/14 21 users フルリプレイス コンソール画面 プライベートクラウド ＣｉＵ

CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお... 続きを読む

App Router | Next.js 公式ドキュメント 日本語翻訳プロジェクト

2023/12/27 8 users Next.js 公式ドキュメント アプリケーショ React

本ドキュメントは公式ドキュメントの v14.0.3 の断面を翻訳したものです。 公式ドキュメントのアップデートに追随して適宜更新しますが、最新情報が反映できていない可能性があります。 一部翻訳途中のページがありますが、随時翻訳を追加予定です。 Next.js の App Router は、React の最新機能を使ってアプリケーショ... 続きを読む

Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site

2024/01/10 22 users hiroppy's site Next.js コード 解説

Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動い... 続きを読む

React Server Components と GraphQL のアナロジー

2023/12/25 65 users アナロジー RSC GraphQL 案件 Next.js

Next.js の App Router が安定版となり、React Server Components (以下 RSC) を実際に試す環境が整ってきた。 実際、今年はやれどこそこのプロダクトが Next.js を採用しただのやっぱり捨てだのといった話題が尽きなかったように思う。 かくいう自分自身も、今年は App Router の案件に取り組んで RSC と格闘する日々を... 続きを読む

ざっくりApp Router入門【Next.js】

2023/09/19 5 users Next.js ファイル バージョン 意味 中心

App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべて... 続きを読む

Next.jsの新常識「App Router」を学ぼう！

2023/07/05 6 users Next.js 新常識 デファクトスタンダード ルーティング

Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱え... 続きを読む

2023-05-10のJS: Next.js 13.4(App RouterがStable化)、Firefox 113

2023/05/10 7 users Next.js 2023-05-10 Stable リソース

JSer.info #643 - Next.js 13.4リリースされました。 Blog - Next.js 13.4 | Next.js App RouterをStableに変更されています。 まだApp Routerについての参考になるリソースは少ないですが、次のドキュメントや記事などが参考になります。 App Router | Next.js 5 Lessons Learned From Taking Next.js App Router to Pr... 続きを読む

Next.js Cacheのアツさをシェアしたい(App Router)

2023/05/05 21 users アツさ

sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling... 続きを読む

Next.js 13.4

2023/05/04 19 users Next.js Stable Router beta

Next.js 13.4 is a foundational release, marking stability for the App Router: App Router (Stable):React Server ComponentsNested Routes & LayoutsSimplified Data FetchingStreaming & SuspenseBuilt-in SEO SupportTurbopack (Beta): Your local dev server, faster and with improved stabilityServer Actions... 続きを読む