Next.js の変更点

追加された行はこの色です。
削除された行はこの色です。
Next.js へ行く。
Next.js の差分を削除
#author("2023-04-13T23:20:09+00:00","default:admin","admin")
#author("2023-05-08T00:07:26+00:00","default:admin","admin")
-[[ReactのフレームワークとしてNext.jsを採用した3つの理由:https://tech.playground.style/javascript/nextjs/]]
-[[なぜNext.jsを採用するのか？:https://mottox2.com/posts/429]]


-[[Next.jsでリダイレクトを行う方法をまとめてみた:https://zenn.dev/uttk/articles/4649e49f1e6628]]
-[[Next.jsとmicroCMSでカップラーメン食べた回数カウンターを作る:https://zenn.dev/hisasann/articles/a957006ba6ffb6]]
-[[Next.js で Node.js の API がいつ入ったのかわかる表を作る:https://zenn.dev/sosukesuzuki/articles/f00bc24600f2d8]]
-[[【Node.js/Next.js】Cloud Runで動作する軽量なDockerを構築してみた:https://zenn.dev/kazumax4395/articles/427cc791f6145b]]

-[[Next.js週次調査報告 Next.jsとは, SG, SSR, erc…:https://engineer.blog.lancers.jp/%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89/next-js%E9%80%B1%E6%AC%A1%E8%AA%BF%E6%9F%BB%E5%A0%B1%E5%91%8A-next-js%E3%81%A8%E3%81%AF-sg-ssr-erc-%E3%83%95%E3%83%AD%E3%83%B3%E3%83%88%E3%82%A8%E3%83%B3%E3%83%89%E5%AE%9A%E4%BE%8B-2023-2-17/]]
-[[フロントエンド開発環境のアップデート：Next.js 13、 React 18、 TypeScript 4.9 の導入:https://tech.asoview.co.jp/entry/2023/04/13/190606]]

*概要 [#o61b6928]
**特徴 [#e0f27726]
-SSR
-webpackやbabelといったフロントエンドのビルド環境をフレームワーク側で内包
-ファイルシステムを利用した手軽なルーティング機能
-TypeScriptのビルトインサポート
-CSS Modulesや数々のCSS in JSのビルトインサポート
-数々のパフォーマンス最適化

*採用事例 [#pf039941]
-[[Next.js + NestJS + GraphQLで変化に追従するフロントエンドへ 〜 ショッピングクーポンの事例紹介:https://techblog.yahoo.co.jp/entry/2020121530052952/]]
-[[Next.jsとSequelizeを使ったアプリ開発に取り組んでみた:https://tec.tecotec.co.jp/entry/2023/03/15/090000]]

*レンダリング [#y6071751]
-[[もう迷わないNext.jsのCSR/SSR/SSG/ISR:https://zenn.dev/a_da_chi/articles/105dac5573b2f5]]
-[[Next.js + SWRでSSG or SSRとCSRを組み合わせて使用する:https://zenn.dev/a_da_chi/articles/d590a69e6991d2]]
-[[【Next.js入門】Next.jsとは？CSR、SSR、SSG、ISRについて:https://blog-mayo.com/2022/10/1211/]]
-[[SSR, CSR, SSG, ISG, ISRの違いと使い分け方。それぞれNext.jsでTodoアプリ作ってみた。:https://scrapbox.io/teamlab-frontend/SSR,_CSR,_SSG,_ISG,_ISR%E3%81%AE%E9%81%95%E3%81%84%E3%81%A8%E4%BD%BF%E3%81%84%E5%88%86%E3%81%91%E6%96%B9%E3%80%82%E3%81%9D%E3%82%8C%E3%81%9E%E3%82%8CNext.js%E3%81%A7Todo%E3%82%A2%E3%83%97%E3%83%AA%E4%BD%9C%E3%81%A3%E3%81%A6%E3%81%BF%E3%81%9F%E3%80%82]]
-[[Next.jsのCSR(SPA),SSR,SSG,ISRのまとめ&メリットデメリットについて:https://tech.012grp.co.jp/entry/2021/03/25/125014]]

-Reactは基本的に、CSR（Client Side Rendering）のみしか実装できない
-Next.jsは、SSR、SSG、ISRを自由に使い分けることでできる
-これらを使うことで、CSR のデメリットである初期表示の遅延が解消される
--そのため、React と Next.js を併用することで、Webページの表示速度を最適化することできる

*データ取得 [#s252346a]
-[[【Next.js】SWRとTanStack Queryの違いを比較:https://almonta2021blog.com/nextjs-swr-tanstackquery/]]
-[[【脱Redux】SWRやReact Queryを使った状態管理戦略:https://zenn.dev/mutex_inc/articles/react-query-state-mgmt]]

-[[Caching clash: SWR vs. TanStack Query for React:https://blog.logrocket.com/swr-vs-tanstack-query-react/]]
-[[Compare SWR and React Query's popularity and activity:https://js.libhunt.com/compare-swr-vs-react-query]]

**[[SWR:https://swr.vercel.app/ja]] [#e720dc85]
-[[Next.jsでの利用:https://swr.vercel.app/ja/docs/with-nextjs]]

-[[SWRを使おうぜという話2022:https://zenn.dev/mast1ff/articles/5b48a87242f9f0]]
-[[SWRで始めるフロントエンドのキャッシュ入門:https://colors.ambl.co.jp/frontend-cash-for-beginners-by-swr/]]
-[[Next.jsにおけるデータfetch色々調べた #SWR編:https://do-do-tech.com/next-js%E3%81%AB%E3%81%8A%E3%81%91%E3%82%8B%E3%83%87%E3%83%BC%E3%82%BFfetch%E8%89%B2%E3%80%85%E8%AA%BF%E3%81%B9%E3%81%9F-swr%E7%B7%A8/]]

-SWRは、クライアントJavaScriptからのデータ取得とそれに関連する操作を提供するReact Hooks群

**[[TanStack Query:https://tanstack.com/query/latest]] [#cb1a0560]
-旧React Query

-[[TanStack Queryは神フレームワーク:https://zenn.dev/mitsuruokura/articles/7372ae1be233c4]]
-[[TanStack Query(React Query)で作るシンプルToDoアプリでCRUD処理:https://reffect.co.jp/react/tanstack-query]]

*状態管理 [#i88baaa3]
-[[結局Reduxとはなんだったのだろう:https://kk-web.link/blog/20220712]]
--改めて Redux の存在意義を考えてみると、こいつはグローバルな state の状態管理を行ってくれるパッケージに過ぎない
--当たり前のことなんですが、グローバルな state って少なければ少ないほど好ましいです。
--state って可能な限りコンポーネントの内部にカプセル化されるべきであるということを勘違いしてはいけない
--なので React の Context や Reducer もそうですし、Redux のような状態管理系のパッケージなんて使わないに越したことはない
--グローバルな stateを管理したい場合でも、Context とか Reducer とかで大抵のケースは事足りる
--それよりは SWR や React Query のようなパッケージを使用して、キャッシュで state を扱うほうが良い

**Redux [#a64cd239]
-[[Next.js + TypeScript + Redux:https://zenn.dev/highgrenade/scraps/fb760ac79ab635]]
-[[Next.js + TypeScript + Redux 複数state管理:https://zenn.dev/highgrenade/scraps/2dedebfae21358]]

-[[Next.js: Redux Toolkit の使い方 (Typescript):https://qiita.com/ekzemplaro/items/bb6af7a3c758e5455105]]
-[[Next.js: Redux Toolkit の使い方 (Typescript) その2:https://qiita.com/ekzemplaro/items/1eae09238cc87fa9e053]]

-[[Next.js + TailwindCSS + Reduxのプロジェクト立ち上げ時のメモ:https://blog.kumano-te.com/activities/create-next-app-with-tailwind-and-redux]]

*Next.js 13 [#q2f81375]
-[[Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022:https://www.publickey1.jp/blog/22/_nextjs_13webnextjs_conf_2022.html]]
-[[Next.js 13 を試してみた:https://dev.classmethod.jp/articles/next-js-13-sample/]]

**appディレクトリ [#l23a85ce]
-[[appディレクトリ:https://chot-inc.com/service/jamstack/app-directory]]
-[[Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching…):https://reffect.co.jp/react/next-js-13-app]]
-[[バックエンドエンジニアがNext.jsのApp Directoryに夢を見る:https://blog.p1ass.com/posts/next-app-directory/]]
-[[【Next.js 13】開発中の個人ブログを app ディレクトリに移行した話:https://qiita.com/ten986/items/484176df5d1f5b757284]]
-[[Next.js 13のappディレクトリを用いたアプリケーションのサンプル実装:https://zenn.dev/akira_miyake/articles/a9f7b34bf6a79a]]
-[[Next.js 13新機能のApp DirectoryとSupabaseでブログ構築:https://www.youtube.com/watch?v=nQ7lKzI6RlE]]
-[[Next.jsのAppディレクトリで複数のTailwind Configを使い分ける:https://zenn.dev/052hide/articles/tailwind-multiple-config-nextjs]]

-[[Full Stack Web App with Next.js 13 and the app Directory:https://levelup.gitconnected.com/full-stack-web-app-with-next-js-13-and-the-app-directory-2cd06c7e37f0]]

-[[Next.js 13 app directory による次世代Web開発 - Udemy:https://www.udemy.com/course/nextjs-supabase-app-directory/]]

***Next.js 13.4 [#v5a3fb81]
-[[Next.js 13.4まとめ:https://zenn.dev/a_da_chi/articles/758f77406cda60]]

*入門 [#f720651a]
-[[[Next.js] 始まる:https://dev-yakuza.posstree.com/react/nextjs/start/]]
-[[今すぐにNext.jsでフロントエンド開発 or Web制作を快適に始めたい方におすすめの簡単セットアップを紹介する:https://zenn.dev/toono_f/articles/1774dc83548079]]
-[[Next.js + TypeScript + ESLint + Prettier 環境構築手順:https://zenn.dev/siakas/articles/05481bdefacd13]]

*tRPC [#jff902b6]
-[[Usage with Next.js:https://trpc.io/docs/nextjs]]

*GraphQL [#adc36df4]
-[[MicroFrontend x Next.js x GraphQL で実装するアナリティクスツール:https://tech.smartshopping.co.jp/microfrontend-next-graphql]]

*[[NextAuth:https://next-auth.js.org/]] [#t2be13e4]
-[[NextAuth.jsについて調べたので使い方まとめとく:https://zenn.dev/nrikiji/articles/d37393da5ae9bc]]
-[[NextAuth.jsでログイン機能を実装してみた話:https://engineering.nifty.co.jp/blog/9817]]
-[[NextAuthを完全に理解する #1:https://qiita.com/kage1020/items/bdefabcd09d86e78d474]]
-[[NextAuthを完全に理解する #2:https://qiita.com/kage1020/items/e5b0053d7046a9b1f628]]