個人開発で参考になるNext.jsリポジトリ10選
OpenStatus - ステータスページ App Router Turborepo Drizzle Clerk tRPC Tailwind shadcn/ui LLM Report - OpenAI モニタリング App Router Prisma NextAuth shadcn/ui Stripe Dub - URL 短縮 App Router Turborepo Prisma NextAuth Tailwind Stripe slug - URL 短縮 Prisma NextAuth tRPC Tailwind Cal.com - 日程調整 Turborepo Prisma NextAuth tRPC Tailwind Taxonomy - ブログ App Router Prisma NextAuth Tailwind Rowy - ローコード GUI Firebase Dorf -
【Next.js 13】環境ファイル別で Google Analytics を設定する
この記事では、Production と Staging 環境で別々の Google Analytics データストリームを利用する手順を紹介します。NextJS 特有の環境ファイルの扱い方や、NextJS 13 から正式に使える App Directory でも利用可能な設定例になります。 はじめに NextJS における環境ファイルについて NextJS では .env.local .env.development .env.production の ３ 種類の環境ファイルが用意されていますが、next start や next build で利用される環境ファイルは .env.production のみです。 例えば Staging と Production 環境を用意している場合、環境ごとに next build で Staging 用環境ファイルか Production 用環境フ
Next.jsのAPI Routesでどんなことができるのかを理解する | アールエフェクト
API RoutesはServerless Functions API Routesに記述したコードはserverless functions(サーバレス)としてデプロイされます。サーバレスという名前からサーバがないというイメージを持つかもしれませんがserverless functionsを利用するとサーバを管理する必要がなくなりserverless functionsを提供するクラウドプロバイダーがサーバを管理してくれます。そのため開発者はserverless functionsに記述するコードの作成のみに集中することができます。またserverless functionsは外部からリクエストがあった場合のみ起動を行い実行して停止するというサイクルを持っているためサーバを常時起動しておく必要はなくリエクストがある回数のみ起動/実行/停止を繰り返すことになります。 Next.jsプロジェ
まねびの枝折
Next.js v13 React Server Components で TanStackQuery のプリフェッチを使ってみる Next.js v13 の React Server Components でサーバー側でのプリフェッチを TanStackQuery で実装してみます。 Next.js v13 から React Server Components が標準に Next.js v13 からは App Router が Recommended となっており、React Server Component(RSC) がデフォルトで利用できるようになっています。 RSC はめちゃくちゃ簡単に言うと React の側を部分的にサーバーで作って、他をクライアントで組み立てるもの、ってな感じです。 こうすることでクライアントへ渡す JS のサイズを抑えることができて、さらに処理を高速化するこ
Next.js 13 の cache 周りを理解する - revalidate
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https
Next.js App Router 知られざるClient-side Cacheの仕様
前回、App Routerの遷移の仕組みと実装についてまとめました。 今回はこれの続編として、App RouterのClient-side Cacheの仕様や実装についてまとめようと思います。まだドキュメントに記載のない仕様についても言及しているので、参考になる部分があれば幸いです。 App Routerのcache分類 App Routerは積極的にcacheを取り入れており、cacheは用途や段階に応じていくつかに分類することができます。まずはそのcacheの分類を確認してみましょう。 Request Deduping Request Dedupingはレンダリングツリー内で同一データのGETリクエストを行う際に、自動でまとめてくれる機能です。 nextjs.org/docsより デフォルトでサポートしているのはfetchのみですが、Reactが提供するcacheを利用することでDBア
Encraft #4「React/Next.js 最前線」開催レポート
こんにちは、よしこです。 今回は、参加者が800人を超え大盛況となった Encraft #4 「React/Next.js 最前線」 の開催レポートをお届けします！ Encraftとは？ Encraft（エンクラフト）は 株式会社ナレッジワーク が提供する、 "Enablement" と "Craftsmanship" をテーマにした勉強会です。技術にこだわりを持つ人々が集まって互いに知見を交換し、できることを増やしていく場を作りたいと思っています。 過去のイベントの開催レポートは以下からご覧ください。 Encraft #1 「フロントエンド × 設計」 開催レポート Encraft #2 「サーバーとクラインアントを結ぶ技術」 開催レポート Encraft #3 「エンジニアイネーブルメント - 共有・育成・評価・効率化 -」 開催レポート それではさっそく今回のセッション資料と動画アー
一言で理解するReact Server Components
この記事はReact公式の内容を翻訳・紹介するものではありません。筆者の解釈や理解を伝えるものであり、Reactの公式見解と一致しているとは限りません。あらかじめご了承ください。 皆さんこんにちは。最近Next.js 13.4がリリースされ、App Routerがstable扱いになりました。App RouterはReact Server Component (RSC) をふんだんに用いて構築されています。 React本体でServer Componentがずっとalpha版なのにNext.jsでbetaとかstableとか言ってるのは何で？ という問題も、React Canaryのアナウンスにより無事に解消されました。 React Canaryってなに？ 先日React公式ブログでアナウンスされた、新しいリリースチャネルです。 筆者の理解による概要をお伝えすると、Canary版のReac
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Deploy a Next.js site · Cloudflare Pages docs