いまNext.jsで新規サービスを立ち上げるときの観点（Router・CSS・認証・監視など/2023年末）
免責事項 社内向けに展開するように雑にまとめました Next.jsの知見が深くない人がリードしてPoCを立ち上げなきゃいけなくなったが、社内的にはNext.jsを推奨しているみたいな場面を想定しています なので自信ないところも多いですが割と断言するように心がけて書いています PoCの立ち上げ想定なので、jest/Storybookなど内部品質面についてあまり深く書くことを避けています ほぼ自分の知識だけで書いており私見も多いですし、そもそも自分自身がトップクラスの知識や視座を有しているわけでもないので、まずは以下の話を理解はした上で、踏襲するかどうかは別途他記事やGitHub、公式ドキュメントなどを漁って判断することを推奨 App RouterかPages Routerか 2023年末現在まだApp Routerは技術記事が足りてきている印象ではないため、社内でノウハウを積極的に貯めていく
一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog
このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2
2023-08-02 What's "Next" JS Meetup
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
JSConf JP 2023
Next.js の App Router を中心に解説した書籍を執筆しました。「実践 Next.js —— App Router で進化する Web アプリ開発」という本です（3/16 刊行）。本稿では書籍の概要と、App Router が何を解決するのかについて紹介します。 書籍の概要 書籍で解説しているサンプルコードは、public リポジトリで既に公開しています。前半、第 1 章〜第 4 章では App Router の基礎を抑えるための練習用リポジトリを使用します。後半、第 5 章〜第 10 章では、写真を投稿する SNS「Photo Share」という架空アプリの実践的リポジトリを使用します。 第 1 章：Next.js の基礎 第 2 章：Server Component とレンダリング 第 3 章：App Router の規約 第 4 章：Route Handler 第 5
We've been building a bridge. You can hear Ryan talk about this announcement at React Conf 🎥 For nearly 4 years we've been working on Remix, a fullstack framework built on web standards to help you build better websites and applications. React Router has always been Remix's largest dependency after React itself. The two projects are so closely aligned that we updated React Router to include Remix
Next.jsのApp Routerを学ぶ際に、UIライブラリを探していたところ、shadcn/uiが参考になったので紹介します。 shadcn/uiは、フレームワークやライブラリではなく、コピペで利用できるReactコンポーネントのサンプル集という立ち位置になっています。Tailwind CSSでデザインされており、React Server Components(RSC)にも対応しています。 サンプルの実装方法が参考になる点も魅力の一つです。 簡単ですがつらつらと紹介していきたいと思います。 shadcn/uiとは デモを見てるとフレームワークやライブラリなのかなと思いきやそうではなく、コピペで利用できるサンプル集という立ち位置になっています。基本的にはTailwind CSSでデザインされてるようです。 サンプルとはいえ、実装方法で参考になった箇所が結構あったのでそこも気に入ってるポイ
App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべてルーティングされました。 ですがApp Routerでは、app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。 ほかにも、layout.tsxと書かれたファイルを置いておくと「layout.tsxでpage.tsxを自動的にラップする」ができたりします👇
mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets をインクリメンタル検索できるサービス作成キット と Tweets をまとめて削除するツールを書いた | Web Scratch 過去の Tweets を全文検索できる mytweets を Bluesky に対応した。自分用 Twilog みたいなもの | Web Scratch 最初は CloudFront + Lambda@Edge + Next.js Pages Router で動かし
Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog
まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかったりすると思いますが、来週 2024/01/17(水) 19:20 〜 オンライン開催の PWA Night vol.59 で発表予定なので興味のある方はぜひ。（終了済み） 下記は本記事の内容を含むイベント発表資料です。ご参考までに。 今回の前提 前回記事 の引用ですが今回も同様です。 最終目標は単体事業でありつつ実質マルチプロダクトな画面群のリプレース クライアントサイドでヘビーなビジネスロジックを持つ必要がない アプリケーション特性としては SaaS
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
https://findy.connpass.com/event/306714/
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne
App Router への移行は「改善」となり得るのか？/ Can migration to App Router be an improvement
フロントアーキテクチャ改善NIGHT https://hireroo.connpass.com/event/310150/
to B プロダクトで Vite + React Router を採用して半年後の感想 / Impressions after 6 months of using Vite + React Router
2024/02/28 「TechBrew in 東京 〜フロントエンド技術選定、その後どうなった？〜」で発表したスライドです。 https://findy.connpass.com/event/310614/ 参照したURL - Plainのフロントエンドにおける技術選定(2023年8月版) - ROUTE06 Tech Blog - 「作ってから売る」と「売ってから作る」と「売れるようにしてから作る」 ～技術の社会実装のための『開発』～ - Speaker Deck - React プロジェクトを始める – React - フロントエンドの移り変わりは早すぎるのか Zenn
TanStack Router（& Query）はSPA開発で求めていたものだった✨【Reactのルーティングとデータ取得】
Reactの技術選定においてルーティングとデータ取得は特に重要な役割を担っています。 もちろんNext.jsやRemixのようなフレームワークを採用すれば、個別のライブラリを追加することなくルーティングからデータ取得までフレームワークが提供するAPIを使って実装することができます。 しかし、AI ShiftのようなBtoBのサービスにおいてはSPAで十分なことがほとんどで、Next.jsなどのフレームワークの採用がtoo muchになりかねません。 この記事は2024年2月時点の技術選定において、TanStack RouterがSPAのルーティングライブラリとして非常に有力な候補であることを紹介します。 はじめに TanStack RouterとTanStack Queryの採用がSPAアプリケーションにおける最適解の一つになりうることをその特徴と実際の設計例をもとに解説します。 TanS
Next.js App Router で Keycloak と @auth0/nextjs-auth0 を利用してマルチテナント認証機能を実装する - Uzabase for Engineers
初めまして、 @takano-hi です。 2023年2月に AlphaDrive にジョインして、主にフロントエンド領域を中心に設計・実装などの業務を担当しています。 最近、Next.js のプロジェクトを新たに立ち上げる機会があり、せっかくなので App Router を採用しました。 そのプロジェクトの認証機能の実装に当たり、今まで他プロジェクトでも利用していた Keycloak と @auth0/nextjs-auth0 の組み合わせを試したところいくつかの困難に遭遇したので、その解決方法についてまとめようと思います。 環境 next v13.4.9 @auth0/nextjs-auth0 v3.1.0 keycloak v20.0.1 ライブラリの選定背景 私が所属しているチームでは、認証基盤（IDプロバイダー）に Keycloak を利用しています。 Keycloak は Op
Next.js App Router
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
PWA Night vol.59 ～フロントエンド設計の振り返り〜 (2024.01.17) https://pwanight.connpass.com/event/306410/ で使用したスライドです。本編 20 分。 ===== ▼ 元データで参考リンクとして張っていた URL たち ※ SpeakerDeck でダウンロードできる PDF はスライド中のリンクが有効です Offers「オファーズ」 - エンジニア、PM、デザイナーの副業・転職採用サービス プロダクト開発組織/エンジニアリング組織のマネジメント・パフォーマンス最大化 | Offers MGR（オファーズマネージャー） turbo/examples/basic at main · vercel/turbo Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offe
Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.
Next.js breaking change - disable router/fetch cache by default
Next.js App Routerは巷では難しいと評されることが多々あります。これはReactの新機能であるServer ComponentsをはじめとするServer 1stとも言えるパラダイムシフトを必要とすること、そして初見殺しなデフォルトのキャッシュ挙動に起因していると筆者は考えています。 パラダイムシフトが必要となるServer ComponentsやServer ActionsなどのReactの新機能については、エラーで指摘・修正のヒントが提示されるなどの初学者のフォローもしっかり考慮した設計がなされてたり、多くのドキュメントや記事が公開されているので、これらについてはhooksが登場した時のようにあとは世の中に理解が広まるまでの時間の問題なのかなとも感じています。 一方でキャッシュについては、デフォルトで積極的かつ何層にも分けてキャッシュされる上、「意図せずキャッシュされて
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
CIUでは、プライベートクラウドのWeb UI開発にNext.jsを用いています。 今回はCIUのフロントエンド組織の現状についてお話した後 ・なぜNext.jsを使うのか ・古いNext.js製サービスをどのようにApp Router化したのか 以上を中心に、CIUのフロントエンド組織の今後の技術戦略などについて、Muddyな内容を織り交ぜながらお話します。
こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ
きっかけ 私は今まで Pages Router でプロジェクトの開発をしてきました。今の所、具体的な新規で開発する案件の話はないけど今後 App Router で開発するときにどうゆうフォルダ構成にすれば良いか悩んだからまとめようかなと思ったのがきっかけです。 環境について node: v18.18.2 npm: 9.8.1 react: 18 系 next.js: 13.5.6 具体的にどんなことに悩んだのか /app の中で style や util 系関数や component なんかも入れた方がいいの？ それとも/app を/pages と同じように扱う方がいいの？ この 2 点です。Private Folders やら Route Groups なんかもあったりして Next.js のファイルベースルーティングはいろんなことが柔軟にできるようになった印象です。 しかし、柔軟だから
App Router でのパンくずやナビメニューの作成に useSelectedLayoutSegments が便利
Leaner Techonologies の @corocn です。 最近 Nuxt.js のアプリを Next.js + App Router に載せ替えたのですが、メニューの描画に useSelectedLayoutSegments が便利だったので軽く紹介します。 実は App Router のドキュメントをちゃんと読んでいくと、Functionsの最後で紹介されています。 何ができる？ メニューを描画するときに、現在のページのメニューだけ下線や太字で装飾したいケースがありますよね。このとき普通に実装しようとするとURLからベースとなるパスを除いた上で分割して...など若干面倒です。 useSelectedLayoutSegment(s) を使うと、レイアウトを起点として、URLをいい感じにパースして返してくれるのでスッキリ書くことができます。 単数形（segment）と複数形（se
React Router とは React Router のルートのマッチング React Router のドキュメントのRanking Routesのセクションを例として説明します。 以下の 5 つのパスパターンを取り得るアプリケーションがあるとして、/teams/newというパスが与えられたときに、どのパスパターンがマッチするでしょうか。 [ "/", "/teams", "/teams/:teamId", "/teams/:teamId/edit", "/teams/new", ]; React Router はここからさらにルートをランク付けし、最終的に/teams/newを最もマッチするルートとして採用します。 どのようにルートをランク付けするか ランク付けというのは、ルートがどれだけパスにマッチするかを評価することです。React Router は、ルートのパスパターンと与えら
はじめに こんにちは！ 犬専用の音楽アプリ オトとりっぷでエンジニアしています、足立です！ この記事では、Next.jsのReact Server Components(RSC) で使用可能なゼロランタイムCSS in JSライブラリを比較します。 目次 モチベーション 使えるライブラリたち 選定基準 選定結果 比較結果 書き味 パフォーマンス Dynamic Styling 結論 モチベーション みなさん、Next.jsのReact Server ComponentsのStyleをどうやるか問題に悩んでおられますね？ 私もどれを使えばいいのかわからずNext.js公式に見に行くと、App Routerで使用できるものとして、以下のライブラリを上げています。 が、React Server Componentsではnot supportedと記載されており、まだまだ未整備な状況のようです。
先日Vercelから「Next.js App Router Caching: Explained!」というタイトルの動画が公開されていたので、その内容をまとめることでNext.jsのキャッシュの今について整理しておこうと思います。 基本 まずNext.jsでは、静的レンダリングがデフォルトです。RSCを使用していても基本的にはビルド時にページが事前レンダリングされます。これはRoute Handlersも同様です。仮にビルド後にデータを更新してもリビルドしない限り表示は古いままであり、これは静的にレンダリングされていると言えます。 ただし、developmentとproductionでは挙動が異なります。ローカルではコードに変更を加えるたびにデータが再取得・レンダリングされるので、ローカルとビルド後の挙動に違いがあることを理解しておきましょう。 リクエストするたびに最新のデータを取得し表示
Common mistakes with the Next.js App Router and how to fix them – Vercel
After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router. This post will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model.
TSKaigiにて使用した資料です。 https://tskaigi.org/talks/ytaisei_ Reactを用いたSPA開発においてフレームワークの採用は時にtoo muchになります。 しかし、Next.jsやRemixのFiled-Basedなルーティングは開発体験が良いです。 私たちはSPA開発においても型安全でFile-Basedなルーティングを求めています。 今回はそのような状況においてTanStack Routerが有力な候補になることを、その特徴とメリットに触れながら解説します。 次の特徴を紹介します。 - 型安全でシンプルなルーティング - File-Basedなルート生成 - バンドルサイズを軽減するCode Splitting - Search Paramsによる状態管理
本ドキュメントは公式ドキュメントの v14.1.0 の断面を翻訳したものです。Next.js の公式 X アカウントにもポスト頂きました。 公式ドキュメントのアップデートに追随して適宜更新しますが、最新情報が反映できていない可能性があります。 一部翻訳途中のページがありますが、随時翻訳を追加予定です。 Next.js の App Router は、React の最新機能を使ってアプリケーションを構築するための新しい方法です。すでに Next.js に慣れ親しんでいる方であれば、App Router が既存のファイルシステムベースのルーターである Pages Router の自然な進化形であることがわかるでしょう。 新しいアプリケーションには、App Router の使用をお勧めします。既存のアプリケーションについては、段階的に App Router に移行できます。同じアプリケーションで両
Next.js13で追加されたApp RouterとReact Server Components──UI通信の関係を再定義する
App RouterはReact Server Componentsを最大限活用する形で実装されているため、外部のデータソースに対する送受信の大半をサーバー側で行います。少し独特ながら、Web標準に寄り添った形で実現された通信周りのフレームワークについて、本記事では学んでいきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Sonoma 14.2.1 Node.js 21.4.0／npm 10.2.4 React 18.2.0 Next.js 14.0.4 UIと非同期通信の状態管理を擦り合わせるのは疲れる ブラウザ上でもサーバー上でも、JavaScriptのランタイムが提供する通信処理のAPIは、基本的に非同期で扱うことが推奨されています。現代
この本の概要 最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん，パフォーマンスを上げるための知識や関連ライブラリまで，詳細なサンプルコードをもとに解説していきます。 こんな方におすすめ 最新のNext.jsに入門したいエンジニアやNext.jsに多少の経験があるが，より良い使い方を知りたいエンジニア 第1章：Next.jsの基礎 1.1：Next.jsプロジェクトの始め方 1.2：アプリケーションのルーティング 1.3：SPAならではのナビゲーション 1.4：ネスト可能なレイアウト 第2章：Server Componentとレンダリング 2.1：Server ComponentとClient Component 2.2：Server Componentのデータ取得 2.3：動的データ取得と静的データ取得 2.4：Routeのレンダリング
React Server ComponentsとApp Routerをそろそろちゃんと理解したい - Qiita
「仕事で React や Next.js を使っているのに、RSC とか App Router とか Suspense とか何にも分からない。。やばい。。。」と焦りを覚えたので、勉強しつつ、Qiita にまとめてみました。 この記事を読めば、以下の項目が理解できるようになるでしょう。 React や Next.js の基礎知識 React Server Components とは何か？ React Server Components のレンダリングの流れ Suspense とは何か？ App Router とは何か？ 少しでも私と同じような悩みを抱えている方の助けになれば幸いです。 TL;DR React は UI を簡単に構築するための JavaScript ライブラリ Next.js は React のフレームワーク React は以下の流れでレンダリング（CSR）を行う レンダリング
React Router v6のルーティング方法を解説 - createBrowserRouterとData APIsの活用法 | DevelopersIO
こんにちは、戸田です。 今回は React Router v6.4 以降を使用する際にどのルーティング方法を使えばいいのか自分の言葉でブログにまとめました。 まず結論 シンプルなルーティングのBrowserRouterかcreateBrowserRouterで迷ったら基本的にcreateBrowserRouterを使いましょう！ 以下がサンプルコードです。 import React from 'react'; import { Outlet, RouterProvider, createBrowserRouter } from 'react-router-dom'; const Parent = () => { return ( <div> <h1>Parent</h1> <Outlet /> </div> ) } const App = () => { const router = cr
JSer.info #693 - 次の記事では、Remix v3はReact Router v7としてリリースする予定という話が紹介されています。 Merging Remix and React Router | Remix RemixとReact Routerは、Viteとサーバ以外はほぼ同等の機能になってきています。 そのため、React RouterをRemixにマイグレーションするのではなく、React RouterをアップデートするだけでRemixの機能を使えるようにしたいという話が書かれています。 既存のRemixアプリは、import先のパッケージをreact-routerに変更するだけで動く予定とのことです。 この意思決定の詳細は、Xでも書かれています。 https://x.com/ryanflorence/status/1791479313939976313 React
本ブログは、App Router方式でのAuth.jsの使い方の説明になります。公式ページはPage Router方式での手順のため、ご参考までに執筆しました。また、Next.jsで絶賛開発中のサーバ・アクションでの動きも調べました。ソースコードはこちらにあります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
App Router時代のデータ取得アーキテクチャ
Next.js App Router での MPA フロントエンド刷新
実践Next.js - App Router への理解を深めるために -
Merging Remix and React Router
Next.jsのApp Routerを学ぶ際、shadcn/uiが参考になったという話 - Qiita
ざっくりApp Router入門【Next.js】
Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
【Next.js】実務でapp routerに移行した所感
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
控えめな App Router と持続可能な開発 - PWA Night vol.59
Next.js App Router Training
やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話
Next.js App Routerの場合componentはどこに置けばいいの？
React Routerはルートをどうランク付けしているか
App Router時代のゼロランタイムCSS in JSに何を使えばいいの？
Next.js App Router キャッシュの今
TanStack Routerで型安全かつ効率的なルーティングを実現
App Router | Next.js 公式ドキュメント 日本語翻訳プロジェクト
実践Next.js ——App Routerで進化するWebアプリ開発
2024-05-19のJS: Remix + React Router = React Router、State of HTML 2023
Next.js 13 App Router での Auth.js の使い方