Twitter/Blueskyの自己ポストの全文検索サービスをNext.js App Router(RSC)で書きなおした方法/設計/感想

2024/02/27 17 users RSC Twitter tweets twilog API

mytweetsという自分の Twitter/Bluesky の自己ポストの全部検索サービスをNext.js App Router(RSC)で書きなおしました。 mytweets は Twitter のアーカイブや Bluesky の API を使って自分のポストを S3 に保存しておき、 S3 Selectを使って全文検索ができる自分専用の Twilog のようなサービスです。 自分の Tweets を... 続きを読む

Next.js App Router キャッシュの今

2024/01/26 10 users キャッシュ RSC Explained Vercel ビルド時

先日Vercelから「Next.js App Router Caching: Explained!」というタイトルの動画が公開されていたので、その内容をまとめることでNext.jsのキャッシュの今について整理しておこうと思います。 基本 まずNext.jsでは、静的レンダリングがデフォルトです。RSCを使用していても基本的にはビルド時にページが事前レンダリン... 続きを読む

Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24

2024/01/24 14 users 技術選定 距離感 技術

https://findy.connpass.com/event/306714/ 続きを読む

Next.js App Router と控えめにお付き合いして普通の Web アプリを配信する | Offers Tech Blog

2024/01/12 15 users Offers Tech Blog web アプリ 長いもの

まずは長いものに巻かれたいときもある Offers を運営している株式会社 overflow の あほむ でございます。 先日 コードベースのディレクトリ構成にフォーカスした記事 を公開した関連記事として、Next.js App Router をどのように取り扱っているかについてご紹介します。 【AD?】今回の記事の内容を含んだり含まなかっ... 続きを読む

一休レストランの XState 導入記 - 一休.com Developers Blog

2023/12/22 61 users 休レストラン Qiita Remix フロントエンド 終わり頃

このエントリーは 一休.comのカレンダー | Advent Calendar 2023 - Qiita の22日目の記事です。 レストランプロダクトUI開発チームの鍛治です。 一休レストランのフロントエンドを担当しています。 一休レストランでは Next.js App Router Remix を採用しています。 user-first.ikyu.co.jp 昨年の終わり頃から始まった一... 続きを読む

Web フロントエンドの推しディレクトリ構成と Next.js App Router なコードベース | Offers Tech Blog

2023/12/18 80 users ディレクトリ構成 フロントエンド コードベース web 暖冬

Offers を運営している株式会社 overflow の あほむ でございます。暖冬と言われつつもすっかり寒い季節ですね。おかげさまで割と走っているほうの師です。（師走） n 年ぶり n 回目の Web フロントエンド 最後にメイン開発者の立場でコードをスクラッチしたのいつだったっけ？と遡ると 2018年ごろのブログ記事 がでてき... 続きを読む

一休レストランで Next.js App Router から Remix に乗り換えた話 - 一休.com Developers Blog

2023/12/15 190 users Remix ＣＴＯ 恩田 リアーキテクト フロントエンド

このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきま... 続きを読む

Next.js App Router での MPA フロントエンド刷新

2023/11/19 77 users

JSConf JP 2023 続きを読む

サイボウズOfficeのフロントエンド刷新（DOGOプロジェクト) をやってます！ - Cybozu Inside Out | サイボウズエンジニアのブログ

2023/09/25 14 users サイボウズOffice サイボウズエンジニア 西谷 概要

DOGOプロジェクトのマスコット こんにちは。サイボウズOffice開発チームの西谷です。 昨年より、私たちは”DOGO”と銘打ち、サイボウズOfficeのフロントエンド部分をNext.js App Routerを用いて刷新しています。 本ブログではこの刷新プロジェクトの概要やこれまでの取り組みについてご紹介します。 プロジェクト発足の背... 続きを読む

Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita

2023/06/18 7 users ドキュメント Qiita Auth.js 内容 実装編

はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． Auth.jsは2023/06/18現在ドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Ro... 続きを読む

React cache() で Next.js の Per-request Caching が実現できるのはなぜか

2023/05/12 9 users fetch Next.js 重複 リクエスト リクエスト単位

Next.js App Router では、リクエスト単位で処理をキャッシュする機構が存在し、ドキュメント上にも Per-request Caching として説明があります。 ひとつは、fetch() による Automatic fetch() Request Deduping で、単一リクエスト内で同一の fetch()リクエストが存在した場合、重複を排除し、最低限の実行としてくれま... 続きを読む

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

2023/05/10 7 users App Router Next.js 2023-05-10

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 App Router (app ディレクトリ) の逆引き辞典

2023/04/16 33 users App ディレクトリ 逆引き辞典

ドキュメントが英語で書かれていて、かつ把握し切れないほど膨大なので、 pages で使えたあの機能って、App Router ではどう書けばいいの？ という初歩的な疑問点や、ドキュメント未記載の機能に着目して、逆引きっぽい形式でざっくりとまとめてみました。 割愛した要素 以下の要素については、煩雑になる or ドキュメン... 続きを読む