Next.js App Router セキュリティ

2024/11/06 15 users セキュリティ

Request Header で Next-Action を送信してる curl で再現するとこんな感じの POST 通信 curl 'https://nextclicker.nanabit.dev/' \ -H 'Content-Type: text/plain;charset=UTF-8' \ -H 'Cookie: ...' \ -H 'Next-Action: 6eb8416051487420c0347306825a392adf55f29e' \ --data-raw '[1]' 手動でリクエストを試してみる ... 続きを読む

AWS上のNext.js App RouterとCDNキャッシュ利用の課題と解決策 - Findy Tech Blog

2024/11/05 43 users AWS上 Findy Tech Blog 課題 解決策 ECS

こんにちは。 Findy Toolsの開発をしている林です。 私たちのプロジェクトではフロントエンドのフレームワークにNext.js App Routerを使っており、AWSのECSへデプロイして運用しています。 そして、一部のレンダリングの処理が重いページのキャッシュを実装する際に、直面した課題と解決策を紹介します。 Next.jsのキャ... 続きを読む

Next.js App Routerの"use server"雑感 : Rails視点から

2024/10/14 19 users 関数 境界 懸念 Server Action Next.js

はじめに Next.jsにServer Actionが新しく導入されました。サーバ上の関数をブラウザから直接呼び出すようなコードの書き味を提供するもので、非常に魅力のあるコンセプトだと私は思っています。ただしサーバ上で実行されるコードとブラウザで実行されるコードの境界が曖昧で、"use server"のセキュリティ上の懸念もよく... 続きを読む

Next.jsで簡単なCRUDアプリを作りながら気になったセキュリティ: Railsの視点から

2024/10/11 108 users Rails デモアプリ CRUDアプリ GitHub CRUD

先日、Kamal 2でNext.jsを安価なVPSにデプロイする勉強をしながら、Next.js App Router/Server ActionでCRUDのデモアプリを作成しました（コードはGitHub）。そのときにセキュリティについて気になって点がいくつかあり、勉強しながら対策をしましたので紹介したいと思います。 私自身は業務でNext.jsを書いた経験が限定... 続きを読む

Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合 | ドクセル

2024/09/09 6 users ドクセル 結合 テスト 機能実装

Next.js App Routerを駆使したアプリケーション開発：React Server Componentを使った機能実装とテストの結合 続きを読む

Next.js App Router / React Server Components(RSC)を紐解いてみた - estie inside blog

2024/08/05 11 users RSC React Server Components

デザインエンジニアの表(@HirokiOmote)です。 Next.jsでApp Routerがリリースされて、1年が過ぎました。 弊社では、@hiroppyさんを技術顧問に迎え、Frontendを中心とした長期的な技術選定にご協力いただきました。 本日は、そこで得た学びをご紹介したいと思います。 App Routerについて 2023年5月にNext.js 13.4がstabl... 続きを読む

Next.js App Router

2024/04/30 17 users

Kotlin Multiplatform at Stable and Beyond (Android Makers 2024) 続きを読む

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 ドキュメン... 続きを読む