いま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
Next.jsから学ぶWebレンダリング ~React誕生以前からApp Router with RSCまでの流れ~
最近話題のReact Server ComponentsやIslands Architectureが何を解決しようとしてるか知るまでの簡単なWebレンダリングの流れを記載しました。 社内勉強会のために作成した資料となるため箇条書きになっておりますが、なるべくHowやWhatではなくWhyやトレードオフを記述するようにしています。（読みにくい or 誤った記載あったらFB頂けたら幸いです） React 誕生までの Web iPhone と Ajax がリードした Web 2.0 時代 Webにおいて Ajax という技術が注目され始める 2005~ Google mapsやGmailといったサービスがリード jQueryの誕生が 2006~ iPhone登場 2007~ スマホアプリの登場によりソフトウェアのUXに求められる質的変化 mobile safariが時代のリードをした Flash
Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog
Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてきました💀 実際には 2017 年から 2018 年にかけての作品ですかね。当時の構想から読み取れる重厚かつ自己表現の感に内心苦笑いしつつ久々の新規建立です。 今回はディレクトリ構造の面から紹介していきます。 推しディレクトリの先達たち 推しディレクトリという言葉に乗っかってみたものの、ゴメンそこまでの熱感は持っていないかもしれない🥺 とはいえ先達の記事もご紹介しておきます。 今回の前提 本稿において、これらの前提に依存した論はほとんど含まれない認識ですが一応
2023/05/05 追記 v13.4.0 をもって App Router は安定版になりました！ https://nextjs.org/blog/next-13-4 公式ドキュメントもベータ→正式版にマージされました。 内容が充実してきている様子ので、そちらを確認してください。 https://nextjs.org/docs 加えて、公式ドキュメントの改善で分かったポイントもいくつか修正しています。 Next.js v13 から App Router 機能 (app ディレクトリ) が新しく追加されました。 （v13.3.0 現在はベータ版です。 v13.4.0 をもって安定版になりました！） ファイルベースの Layout 機能 処理の一部を Server Component に移しバンドルサイズを削減できる 例: remark を利用した Markdown のパース が有名なところだ
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を自動的にラップする」ができたりします👇
【Vue.js】【Firebase】routerを使ってログイン認証がないと見れないようにする設定方法 - かとのぼのマイコード・マイライフ
この記事は、Vue.jsとFirebaseでログイン認証を実装した際、ログインしていないと見れない画面を設定したい場合のサンプルコードと解説です。 サンプルコードは、サーバーはFirebaseで、Vue-Routerを使っている前提で説明しています。 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 2.「router.beforeEach」を設定することで画面遷移する前にログイン判定 3.実際のサンプルコード 1.Vue-routerのログイン認証判定のポイントは「meta」と「requiresAuth」 ログイン判定が必要なパスだと設定するには「ルートメタフィールド（要するにmeta情報）」を利用します。 ルートメタフィールド | Vue Router 「router.js」にVue-routerのコードを記述していますが、そのroute
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 で動かし
sumirenです。 2023年5月5日、ついにNext.js App Routerがstableになりましたね！ おめでとうございます！！ありがとうございます！！！ 今から本番で使うのが楽しみで待ちきれません。 13.4のリリースではstableの宣言とともに、目玉機能としてServer Actionsが来ています。Data Fetch（というか、もはやData Handling的なもの）の機能の一部として、とても興味深いです。 さて、Server Actions自体の解説は他の方に任せるとして、リリースノートには以下のような一文があります。 Server Actions in Next.js have been designed for deep integration with the rest of the data lifecycle, including the Next.js
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/
はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． 2024/02/19 追記 Auth.jsはv5で破壊的変更がありました．新たにAuth.jsを学ぶ場合には，特に理由がない限りv5を使うことをお勧めします． Auth.jsはドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Router実装編です．前回の記事はこちら 環境構築 JWTを用いたOAuth認証を行うためのNext.js環境を構築します．面倒であれば以下にテンプレートを用意しましたのでご自由にお使いください． まず，Next.jsを作成します．以下のコマンドを実行し，質問に答えながら構築します． √ What is your projec
TanStack Router
Modern and scalable routing for React applicationsA fully type-safe React router with built-in data fetching, stale-while revalidate caching and first-class search-param APIs. Get Started Typesafe & powerful, yet familiarly simpleTanStack Router builds on modern routing patterns made popular by other tools, but has been re-engineered from the ground up to be 100% typesafe without compromising on D
一休レストランで 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
趣味や健康のために習慣的にランニングすると、ランニングコースが固定されてマンネリ化しがちです。しかし、思い切って新しいランニングコースを開拓しようとしても、そのコースが混雑しがちで走りづらかったり、緑がなく殺風景だったりするとがっかりしてしまいます。無料でブラウザやスマートフォンアプリから使用可能な「Trail Router」は、スタート地点を指定するだけで自動的にランニングコースを生成してくれて、緑に囲まれた道や起伏が少なく走りやすい道を選ぶように設定することも可能とのことなので、実際に使って試してみました。 Trail Router https://trailrouter.com/ Trail Router - Google Play のアプリ https://play.google.com/store/apps/details?id=com.trailrouter Trail Rou
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
React Router v5.1
Today, we are releasing React Router version 5.1. This post will discuss the 5.1 release as well as discuss a few things you can do to prepare for the future. We are hard at work incorporating the best ideas from @reach/router, as well as community feedback about the 4/5 API, into version 6 which we expect will be ready sometime around the beginning of the new year. That being said, we are putting
Vue Router Next - 意外と語られない Vue 3 時代のルーティング / Vue Router Next - Routing in the Vue 3 that is not talked about unexpectedly
生田望 （LINE株式会社） 「UIT meetup vol.10 『Vue 三昧』」での発表資料です https://uit.connpass.com/event/187267/
Next.jsの新常識「App Router」を学ぼう！
Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ
ReactのあたらしいRouterライブラリ「React Location」を試してみた | DevelopersIO
React LocationはRouteのルールを記載にオブジェクトの形で記載します。React Routerと同様にライブラリを追加することでJSXスタイルでの記載も可能ですが公式ドキュメントではオブジェクト形式での記載となっているためオブジェクト形式での記載がオススメです。（ちなみにReact Routerもオブジェクト形式での記載をサポートしています） React Location Elements To Routes Router.tsxファイルとしてオブジェクト形式でパスを記載し、App.tsxに組み込んでいきます。elementとして読み込むコンポーネントは別途作成します。 src/Router.tsx import { Route, ReactLocation } from '@tanstack/react-location'; import { Home } from '.
react-router 作り方
history で自分だけの最強のルーターライブラリを作ろう！ react-router は history というライブラリを内部で使用しています。ブラウザの history API の抽象化を提供するのが目的のライブラリです。 react-router v5 の API に useHistory というカスタムフックがあります(v6 から名前が変更されています)が、それはまさに history ライブラリの実体を取得するための関数になっています。 ルーティングに関する以下の処理は history ライブラリ内部で行われています。 現在の URL から Location オブジェクトを作成する 履歴の操作を行う 履歴の変更を検知してコールバックを実行する react-router は React 用のインターフェイスを提供しているに過ぎません。 つまり、 history をベースに Re
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な内容を織り交ぜながらお話します。
React Router v6 で登場した <Outlet /> を活用すると、良い感じに共通レイアウトを組み込めて、さらに <React.Suspense> や React.lazy() を組み合わせると体験が良くなるのを見つけました。おそらく React Router v6 を利用する上での頻出イディオムになると思うので、自分用のメモとして残しておきます。 最終的なサンプルコードはこちら。 使用したライブラリは次のとおりです。見た目がしょぼいとテンションが下がるので MUI で装飾していますが、本筋とは関係ないので今回は特に触れません。 react@18.0.0 react-dom@18.0.0 react-router-dom@6.3.0 @mui/material@5.9.3 @mui/icons-material@5.8.4 @emotion/react@11.10.0 @emo
こんにちは。ココナラテックエージェントの開発をしているエンジニアのみんです。 新技術が常に登場しているフロントエンドの開発で、時代の波に乗り、キャッチアップすることが我々エンジニアの使命です。 ココナラテックエージェントのフロントエンドは Next.js アプリケーションです。2023年の9月から、App Routerへの移行を始めています。 つい9月末に、ココナラテックエージェントの案件一覧ページをApp Routerに移行しました！ 案件一覧と検索を含め、案件まわりのキャッシュ再検証（revalidate）の実装に全身全霊を注いだ成果をシェアしたくて、この記事を書きました。 App Routerのキャッシュ種類 Next.jsは、レンダリングの効率を上げるために、オプション指定がない場合に全てのリクエスト結果をキャッシュする方針です。 公式ドキュメントによると、App Routerのキ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
App Router時代のデータ取得アーキテクチャ
Next.js App Router (app ディレクトリ) の逆引き辞典
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 Cacheのアツさをシェアしたい(App Router)
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
【Next.js】実務でapp routerに移行した所感
1台何役も使えて3万円台!? ビデオ監視もVPN構築も“秒で”できるWi-Fi 6ルーター Ubiquiti「UniFi Dream Router」【イニシャルB】
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
App Router移行時に0.01%の確率でCSR遷移が404エラーになる - とろろこんぶろぐ
無料でランニングルートを自動生成し緑に囲まれた走りやすいコースを開拓できる「Trail Router」
控えめな App Router と持続可能な開発 - PWA Night vol.59
Next.js App Router Training
React Router v6のOutletとReact.lazyの組み合わせが便利
やっとわかる！Next.js App Routerのcacheにおけるrevalidateと苦戦した話