Next.js App Router 入門情報リンク集

2023 年 9 月ごろから小規模なサービスを App Router で開発・運用しているのだけれども、当時と違って現在は公式ドキュメントの日本語訳や日本語書籍が出てきたりして、情報が出揃ってきた感じがするのでまとめてみる。

公式

なにはともあれ公式

https://nextjs.org/docs/app

日本語訳

NRI による翻訳

https://ja.next-community-docs.dev/docs/app-router

チュートリアル

https://nextjs.org/learn/dashboard-app

サンプルコード

Vercel の Next.js Commerce が v2 で App Router 版になったので参考になる

https://github.com/vercel/commerce

日本語書籍

App Router の開発の流れを体系的に知りたい場合に

https://gihyo.jp/book/2024/978-4-297-14061-8

紹介記事・書評

• 実践Next.js - App Router への理解を深めるために -
• Next.jsを初心者向けツールとして捉えている自分が、実践 Next.js を読んでみて | blog.ojisan.io
• 書評『実践 Next.js ― App Routerで進化するWebアプリ開発』 - memo_md

選定・採用・移行事例

https://engineering.mercari.com/blog/entry/20240613-mercari-hallo-web-frontend/

https://note.com/pharmax/n/n46d86d9c27e8

https://speakerdeck.com/izumin5210/findy-2024-01-24

https://offers.jp/qa/question/UPgI_KPIIx

https://www.wantedly.com/companies/rebase/post_articles/887970

https://kakehashi-dev.hatenablog.com/entry/2024/03/25/093000

https://tech.every.tv/entry/2023/10/04/110528

https://tech.aisaac.jp/entry/2023/09/26/130758

https://techblog.zozo.com/entry/front-end-efforts-on-zozo-marketing-platform

https://speakerdeck.com/cyberagentdevelopers/puraibetokuraudonokonsoruhua-mian-wonext-dot-jsnoapp-routerdehururipureisusitahua

https://speakerdeck.com/takefumiyoshii/can-migration-to-app-router-be-an-improvement

https://zenn.dev/overflow_offers/articles/20240112-using-nextjs-app-router-sparingly

https://efcl.info/2024/02/26/mytweets-next-rsc/

https://speakerdeck.com/mugi_uno/next-dot-js-app-router-deno-mpa-hurontoendoshua-xin

https://zenn.dev/ficilcom/articles/a0d287d6dbd715

https://zenn.dev/tellernovel_inc/articles/edc73f853c567c

ナレッジ・ハマりどころ

https://github.com/vercel/next.js/discussions/52796

https://zenn.dev/moozaru/articles/0d6c4596425da9

https://oisham.hatenablog.com/entry/2024/04/04/105444

https://azukiazusa.dev/blog/server-components-testing/

https://www.docswell.com/s/junseinagao/KGXPXN-nextjs-app-router-testing-strategy

https://storybook.js.org/blog/build-a-nextjs-app-with-rsc-msw-storybook/

https://zenn.dev/coconala/articles/d23fe8701ce10b

https://zenn.dev/frontendflat/articles/nextjs-cache-2024

https://zenn.dev/overflow_offers/articles/20231215-directory-structure

Pages Router からのマイグレーション

https://nextjs.org/docs/app/building-your-application/upgrading/app-router-migration

https://ja.next-community-docs.dev/docs/app-router/building-your-application/upgrading/app-router-migration

See Also

https://zenn.dev/suzu_4/articles/2e6dbb25c12ee5

https://speakerdeck.com/takonda/migration-from-next-app-router-to-remix