はじめに 初めまして、現在エンジニアをしながら起業をしてサービスを開発中の橋田至です。 私は今Swappyという同人誌のフリマサイトを開発中です。 初めは一人で開発をしていたのですが、開発すべき機能が多すぎることに気づき、共同開発者を募集しました。 その結果、現在約10名ほどのメンバーがアクティブに開発しています。 チーム開発の難しさ 一人で開発するなら自分だけがコードを読めて理解できたら良いです。 しかし、チーム開発となると統一されたコーディング規約やルールが必要になります。 今回は、個人開発レベルをチームで行う際の環境整備手順を記事にしました。 参考になれば幸いです。 技術スタック Next14(App Router) TypeScript Prisma tailwindcss daisy UI 他:MongoDB・Vercel・git,github・NextAuthなど pull_r
at ジャムスタックチョットデキル!! シブヤ!! 大規模メディアにてOn-demand ISRとISRの費用対効果についてお話しさせていただきました。 ちょっと株式会社 https://chot-inc.com/ ジャムスタックチョットデキル!! シブヤ!! https://chot.connpass.com/event/272088/
tl;dr API Route でクライアント用のコードも一緒に実装すると型安全に実装しやすい ただしセキュリティは気をつけてね 発想 Next.js から Prisma ORM を利用する という記事で、 Next.js の getServerSideProps で prisma のコードを使う例を紹介しました。 これは pages というユニバーサルなエンドポイントで、クライアントとサーバー用のコードを両方記述しています。 import type { GetServerSideProps } from "next"; import prisma from "../lib/prisma"; type Props = { count: number; }; export const getServerSideProps: GetServerSideProps<Props> = async
転職会議のフロントエンドパフォーマンス改善〜React/Next.jsでWeb Vitals健全化、スコア2.5倍改善を達成した手法の全て - LIVESENSE ENGINEER BLOG
これは Livesense Advent Calendar 2022 DAY 15 の記事です。 はじめに 転職会議事業部エンジニアの、池田、犬島、佐藤、浜田です。 転職会議は、ユーザーの口コミ投稿によって成り立っている転職サイトです。 フロントエンドはReact/Next.jsによる独立したマイクロサービスとして切り出されており、BFFを通じてバックエンドのサービス群とAPI通信する構成をとっています。 サービスの性質上口コミを中心とした検索流入が重要であり、SEOの文脈でフロントエンドのパフォーマンス改善の必要性は認識されていましたが、機能開発や負債解消もあり、まとまった対応ができない状況が続いていました。 この状況を改善すべく、1年間継続的に改善に取り組み、Web Vitalsの健全化、パフォーマンススコアの大幅な改善を達成することができました。 本記事では、特に効果が大きかった改善
Next.jsの認証チェックどこでするか問題 基本的には middleware.ts で行うと思うのですが、肥大化を避けたり、ちょっとした共通処理は layout.tsx に書くこともあるでしょう。今回は layout.tsx で認証チェックをした場合に、実装によっては意図せず認証ユーザにしか表示したくない情報が漏洩してしまうかもしれないケースを紹介します。 問題のあるコード import { redirect } from "next/navigation"; export const dynamic = 'force-dynamic'; function currentUser() { // ここでセッションデータから認証ユーザ情報を取得する関数 // デモ用にログインしていないユーザを再現したいのでfalseを返す return false; } export default fun
Next.js 13 vs Remix: An In-depth case studyLast updated on 29 Sep 2023 by Prateek Surana • - min read When it comes to building web applications, React has been at the forefront for a while now, and its adoption continues to grow. Among the most common approaches to building web applications with React, Next.js stands out as one of the most preferred options. Next.js has also been in the limel
Cloudflare PagesにNext.jsをデプロイするとSSRが動作するようになったのでどうやって実現されたのかを調べた
これまでの問題 Next.jsのEdge RuntimeはAPI RoutesやMiddlewaresのような単純なリクエスト/レスポンス変換を行う用途で提供されていてReact Componentをレンダリングする(SSR)にはNode.jsランタイム(主にNodeのStreams API)が必要だった[1]。 その上でCloudflare Workersの実行環境でSSRを実現するにはFastly Compute@EdgeのコンポーネントのようにNode.js APIの互換性問題を解決しプラットフォームに適合したグルーコードを生成することが要求された(fastly/next-compute-jsの内部アーキテクチャを調べるを参照)。 なのでCloudflare WorkersにAPI単体をデプロイ+Cloudflare Pagesにエクスポート済みの静的サイトをデプロイしてSPAで動か
はじめにNext.js アプリケーションのデプロイ先の候補として Vercel が真っ先に挙げられますが、料金などの色々な都合でほかの場所にホスティングしたいこともあると思います。 SSG (Static Site Generation) で利用する場合は、幅広い選択肢がありますが、SSR (Server Side Rendering) と ISR (Incremental Static Regeneration) を使いたい場合の選択肢は、それほど多くありません。 AWSに SSR可能な Next.js アプリケーションをデプロイするメジャーな２つの方法 AWS Amplify と Serverless Next.js Plugin (Component) を紹介します。 サーバーレスなSSRとISRNext.jsのさまざまなレンダリング形態と特徴については、本記事では深掘りしませんが、
個人開発してるサービスをExpressからNext.jsにしたり、BusBoyを使った話しなど - maru source
2017年から個人で開発しているTrickleというサービスがある。最近、これのバックエンド構成を変えたり、新機能追加などをした。技術的に目新しいものや凄いものはないけど、頑張ったのでその時の話を残しておく。 バックエンド Express → Next.js Multer → BusBoy Web版 GAE → Cloud Run クライアントアプリ React Nativeのアップグレード react-native-image-crop-picker → react-native-image-picker ソーシャルログイン アイコン変更 バックエンド Express → Next.js これまではExpressでモバイルアプリ向けのWeb APIを作っていたが、今回Web版も作るにあたり、Next.jsに移行した。 まずはこれまでのモバイルアプリ向けAPIをNext.jsのAPI Ro
備忘録です WindowsでDockerを使ってNext.js開発環境を構築しようとすると、実はいくつかのトラップがあるのでその点も解決しつつ解説していこうと思います。 検証環境 Windows 22H2 VScode 1.78 Docker Desktop 4.19.0 さっそくやりましょう コンテナ定義 VScodeで作業用のフォルダを開いて、Dockerfileを作成しましょう
まえがき AWS AmplifyでついにNext.jsのISRに対応したようです。実際にやってみる。 Deploy and host server-side rendered apps with Amplify - AWS Amplify 少しハマったので備忘録も兼ねて。 Amplify + Next.jsをデプロイ Next.jsのプロジェクトを作成 yarn create next-app --typescript ✔ What is your project named? … next-sample-app Next.jsにISRのページを作成 サンプルでISRのページを新規作成します。簡単にタイムスタンプを表示し、5秒間キャッシュするようにします。 pages/isr.tsx import Head from 'next/head' import styles from '../s
// ---- ON THE SERVER ---- // app/projects/mutations/createProject.ts import { resolver } from "@blitzjs/rpc" import db from "db" import * as z from "zod" // This provides runtime validation + type safety export const CreateProject = z .object({ name: z.string(), }) // resolver.pipe is a functional pipe export default resolver.pipe( // Validate the input data resolver.zod(CreateProject), // Ensure
「State of JavaScript 2023」公開。フロントエンドライブラリ利用率1位はReact、メタフレームワークはNext.jsなど、2万3500人のエンジニアが回答
JavaScriptに興味を持つ世界中のIT技術者2万3540人が回答したアンケートの結果をまとめた「State of JavaScript 2023」が公開されました。 回答者の国別分布を見ると米国が16％、フランスが7％、ドイツも7％、イギリス（UK）が5％、ポーランドが4％、ロシアが3％、カナダが3％などで、日本は2％（回答者280人）でした。 ここでは発表された内容から、多くの読者が興味を持つであろう、JavaScriptライブラリの人気など、結果の一部を紹介してみます。 フロントエンドフレームワークはReactが1位、2位にVue.js フロントエンドフレームワークの利用率ランキングはReactで、2位以下を引き離して8年連続1位、しかも利用率を伸ばしています。2位にはAngularを抜いてVue.jsが初めて入り、3位は昨年よりランクも利用率も落としたAngularとなりました
はじめに こんにちは、ziと申します。 今回は、発表からしばらく経ってしまいましたが、View Transitions APIを使ったNext.jsでのスムーズなページ・UI遷移を目指して、実装してみます。 ※もし間違いやより良い実装方法など見つけましたら、ご指摘ください！ 🙇♂️ 今回実装した最終成果はこちらです。 また、コードはこちらにあります。 View Transitions APIとは？ View Transitions APIとは、2023年4月11日現在Chrome 111とOpera 97(pre-release)以降で実装されている遷移のアニメーションを行うブラウザーAPIです。下記は、MDNからの引用です。 View transitions are a popular design choice for reducing users' cognitive load,
はじめに タイトルで大袈裟にZero API Web Applicationという名前をつけてしまいましたが、要するにNext.jsのversion13.4のServer ActionとReact Server Componentを活用してAPIを作らない・叩かないWeb Applicationを開発するというものです。 今回は趣味で作った麻雀のゲームを例に、Next.js@13.4でAPI要らずなアプリケーション開発及び、開発で得た知見を紹介できたらと思います。 補足ですが、今回開発したアプリケーションの概要としては、麻雀のさまざまな局面に応じて「あなたならどの牌を切る？」というアンケート型のゲームです。 話すこと 今回以下の二点に絞って知見を共有できたらと思います。 RSCとserver actionsでZero APIの実現 ファイルベースのOGP・favicon 成果物とその構成
AWS Amplify × Next.js で Server Side RenderingのデプロイおよびCI/CD環境を構築する
本記事では、AWS Amplify と Next.js を使って SSR 構成のデプロイ、および CI/CD の構築について考えていきたいと思います。 ※2021/05/19 更新 Amplify Console が SSR ホスティングをサポートしたので記事の内容を更新しました Amplify ConsoleがNext.jsで作成されたアプリのSSRに対応しました🎉 去年9月にAmplify LibrariesがNext.js/Nuxt.jsのSSR対応したので、SSRがAmplifyで完結できるようになります！https://t.co/igYF9Vz61a#AWSAmplifyJP — Jaga@AWS Amplify (@jagaimogmog) May 18, 2021 (参考) https://aws.amazon.com/jp/blogs/mobile/host-a-next
Next.js 13.4
Next.js 13.4 is a foundational release, marking stability for the App Router: App Router (Stable): React Server Components Nested Routes & Layouts Simplified Data Fetching Streaming & Suspense Built-in SEO Support Turbopack (Beta): Your local dev server, faster and with improved stability Server Actions (Alpha): Mutate data on the server with zero client JavaScript Since the release of Next.js 13
Next.js 13には、LayoutとTemplateというよく似た機能が存在します。 この記事では、それぞれの特徴と使い分け方についてまとめてみました。 Layoutとは？ Layoutは複数のページに渡って共有されるUIのことを指します。 特徴としては画面遷移が行われた際に、その状態を保持し、再レンダリングは行われません。またLayoutはネスト（入れ子）にして使用することも可能です。 Layoutの定義方法 appディレクトリ配下で layout.tsx ファイルを定義するとLayoutとして定義できます。 例えば、以下のようなLayoutを定義することができます。 // app/posts/layout.tsx export default function Layout({ children, }: { children: React.ReactNode; }) { retur
Next.js 11
As we announced at Next.js Conf, our mission to create the best developer experience continues with Next.js 11, featuring: Conformance: A system that provides carefully crafted solutions to support optimal UX. Improved Performance: Further optimizations to improve cold startup time so you can start coding faster. next/script: Automatically prioritize loading of third-party scripts to improve perfo
Next.js 製アプリケーションの CI の実行時間削減や安定性向上のために取り組んだこと - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは！DOGO プロジェクトでソフトウェアエンジニアとして活動している @nissy_dev です。 DOGO プロジェクトでは、画面刷新を進めていく中で CI の実行時間が長く不安定になってしまい、開発生産性に大きな影響が出ていました。今回の記事では、CI の課題改善のために取り組んだことを紹介します。 目次 DOGO について CI を改善することになった背景 CI の改善のために取り組んだこと ビルド時に tsc を実行しない .next/cache を除いて、artifacts にアップデートする E2E テストをより多くの shard 数で分割する Playwright のブラウザのインストールをキャッシュする PR ではコード差分に関連するテストのみを実行する Hydration の挙動によってテストが flaky になっていた問題の解消 CI の改善の結果 今回取り組ま
Next.js App Router で Keycloak と @auth0/nextjs-auth0 を利用してマルチテナント認証機能を実装する - Uzabase for Engineers
初めまして、 @takano-hi です。 2023年2月に AlphaDrive にジョインして、主にフロントエンド領域を中心に設計・実装などの業務を担当しています。 最近、Next.js のプロジェクトを新たに立ち上げる機会があり、せっかくなので App Router を採用しました。 そのプロジェクトの認証機能の実装に当たり、今まで他プロジェクトでも利用していた Keycloak と @auth0/nextjs-auth0 の組み合わせを試したところいくつかの困難に遭遇したので、その解決方法についてまとめようと思います。 環境 next v13.4.9 @auth0/nextjs-auth0 v3.1.0 keycloak v20.0.1 ライブラリの選定背景 私が所属しているチームでは、認証基盤（IDプロバイダー）に Keycloak を利用しています。 Keycloak は Op
Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~
Next.jsにはIncremental Static Regeneration（以降: ISR）というレンダリングの仕組みが存在します。ところがこれを利用するにはVercel上でNext.jsを使用しないと完璧な動作をしないことは知られています。ですが、このISRの仕組みは従来のSSRよりサーバの処理コストはもちろん、キャッシュという仕組み上レスポンスにも非常に効果のあるものです。 今回はこのISRを独自に構築するための技術を記事として起こしていきます。 本記事の続きとなるものはこちらに記載しておりますので、合わせて御覧ください。 【前提条件】 ISRが何という説明は本記事では行いません。 システム構成上、1記事ですべてを説明するにはボリュームが大きいので複数記事に分けさせて頂きます。 本記事で詳細するシステム構成には一部成約が存在します。 使用するNext.jsもしくはそれに準ずるもの
これらの変換はビルトインなhookに対してconst [a, b] = useState(...)をconst {0: a, 1: b} = useState(...)にするが，これが一体何を意味しているのかわからなかったtosuke.icon
Next.js の Error を丁寧に扱う
Next.js には組み込みのエラーフォールバック機構が存在します。pages/404.tsxとpages/500.tsx、Unhandled Error を捉えるpages/_error.tsxが組み込みフォールバックです。https://nextjs.org/docs/advanced-features/custom-error-page 実アプリケーションにおいてはこれだけでは不十分なケースが多く、意図的なもの・そうでないものをハンドリングしログ収集に繋げるなど、きちんとエラー設計をしたいところです。 TypeScript 4.4 で try catch の推論が変更になった 話が少しそれますが、TypeScript 4.4 で try catch 文の catch 引数errの推論がanyからunknownに変更になりました。この変更はuseUnknownInCatchVariab
Panda CSSとは はじめに、今回のメインテーマとなるPanda CSSについて簡単に紹介します。 CSS-in-JS with build time generated styles, RSC compatible, multi-variant support, and best-in-class developer experience Panda CSSとは、上記公式サイト冒頭にもあるようにパフォーマンス面の課題をクリアしつつ、最高クラスの開発体験も両立したCSS in JSライブラリとなっています。 （最近ではNext.jsのReact Server Componentsが安定版になったこともあり）従来のようにランタイムCSS in JSを利用することが推奨されなくなってきている中、Chakra UIと同じ開発元によって、ゼロインタイムを実現したPanda CSSが新たにリリー
The React ecosystem is a bustling landscape, brimming with frameworks promising to revolutionize web development. Today, we’ll be diving into two popular contenders: Next.js and Remix. Next.js is one of the most popular React frameworks used for server-side rendering. It’s been there for a significant time, and it provides an exceptional developer experience with all the features developers need.
Next.js で開発をしていると、ドキュメントに書かれている通りに記述してもうまく動かず、実は「next build && next start しないと確認できないものだった」という事がしばしばあります。そこで、気づいた時雑多に放り込む場所があると良さそうと思い、スクラップを開きました。 どなたでも投稿大歓迎です。
Make beautiful websites with Next.js & MDXSimple, powerful and flexible site generation framework with everything you love from Next.js Get started →
「Honoのv4が2月9日にリリースされます」という記事にてHono v4ではSSGモードがサポートされると発表があった。この機能を試す目的で今までNext.jsのSSGモードで構築していた個人ブログをHonoのSSG機能で書き換えた。 ブログ https://yuheinakasaka.github.io/gialog-diary/ リポジトリ https://github.com/YuheiNakasaka/gialog-diary 元の個人ブログではr7kamuraさんのr7kamura/gialog: Blog template to use GitHub Issues as article editor.というテンプレを使っている。これはGitHub IssuesをCMSとして用いて記事を書き、issueの作成などのイベントをフックにしてGitHub Actionsを起動させて記
ブラウザバックしたときに状態を復元する（Vue3, Nuxt3 そして Next.js） - Qiita
ブラウザバックは Web アプリの鬼門 Vue に限らずですが、Web アプリにおいてブラウザでバックボタンやフォワードボタンの実行に対応するのはなかなかに難しい問題です。そのため、POST Back 型のフレームワークではブラウザバックの使用自体を禁止することも多かったと思います。 SPA全盛の今、この問題は解決されたのでしょうか。 いえ、状況はむしろ悪化しています。テンプレートエンジンを使った HTML 生成型の Web サイトであれば、ブラウザバックを行うことで、フォームの値とスクロール位置は復元されますが、JavaScript ベースで構築された画面ではフォームの値は保存されませんし、スクロール位置が復元できるかも条件次第です。 一般的な解決策 では、Twitter に代表されるSPAアプリではこの問題にどうやって対応しているのでしょうか。答えは「対応しない（あるいはスクロール位置
Next.js 9.4 から Incremental Static Regeneration という機能が実装されました。 段階的な静的サイト生成と訳されていて、SSG のビルドを最適化するものだろうなって認識しか無かったのですが自身のブログを ISR に対応させたので紹介していきます。 Next.js のビルドパターン紹介 Next.js のビルドにはいくつかパターンがあり、pages/ コンポーネントの処理に応じて適した出力をしてくれます。 どのパターンでビルドされてるかはログに書かれており、参考までにブログを yarn build した結果下記のように表示されました。 Page Size First Load JS ┌ ● / (ISR: 1 Seconds) AMP AMP ├ /_app 0 B 58.4 kB ├ ○ /404 0 B 58.4 kB ├ ○ /about AM
Next.js + TypeScript + Recoil + Herp社ESLint Config でReactチュートリアルを作る。
制作したもの 概要 React のチュートリアルの三目並べを Next.js 12 + TypeScript + Recoil + @herp-inc/eslint-config の構成で、新しめの記述を取り入れた形に書き直してみた。 （上記のリポジトリにすべてのコードを掲載した。） コンセプトは、 TypeScriptの型チェックと厳しめのESLintルールでバグが起きづらい形にし、スケールしても内部品質を担保。 Next.jsで作ることにより、ブラウザでのパフォーマンスと開発体験の向上 である。 改良したいポイント React のチュートリアルの三目並べ（マルバツゲーム）の公式サイトに掲載されている元のコードは以下である。 この code に関して、以下のような課題が考えられる。 React の書き方が、現在では非推奨のクラスコンポーネントである。（関数コンポーネント + React
Next.jsの新常識「App Router」を学ぼう！
Next.jsは、ルーティングとサーバー処理を高度に協調させるためのフレームワークとして、デファクトスタンダードの地位を確かなものにしています。2023年5月5日に公開されたNext.js 13.4において、フレームワークの根幹であるルーティング機構を刷新する新機能が追加されましたので、今後のNext.jsはどんな世界観で扱えばいいのかを解説していきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Ventura 13.4 Node.js 20.2.0／npm 9.6.6 React 18.2.0 Next.js 13.4.4 より直感的なルーティング、よりサーバーを活用したレンダリング Next.jsは、ReactでWebサイトやWebアプリケ
mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 Next.jsのアプリケーション開発をしている際に、HTTPSでアクセスしたいことはないでしょうか？私はあります。 ということで、mkcertを利用してローカルのNext.js開発環境にHTTPSアクセスができるようにしてみました。 前提 OS環境としては、MacOSで検証を行っています。 mkcert について mkcertはローカル開発環境に信頼された証明書を作成できるツールです。 今回はこちらを利用して証明書を発行してみます。 インストール インストールはMacOSの場合brewコマンドで簡単にインストールすることができます。なお、MacOS以外についてもREADMEにインストール方法が記載されています。 % brew install mkcert ==> Fetching mkcert ==>
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説 - Qiita
Next.js 9.3新API getStaticProps と getStaticPaths と getServerSideProps の概要解説Reactserver-side-renderingNext.jsJAMstackVercel はじめに この記事ではNext.jsにvesrion 9.3から導入された以下の3つのAPIについて解説します。 getStaticProps getStaticPaths getServerSideProps こちらのissueで議論されてきた機能です。 Static Generation / SSG Improvements · Issue #9524 · zeit/next.js GitHub追っているとGS(S)P methodsと略されているのを見ます。 Next.jsが未経験の方でもReactとSSR(Server Side Render
Next.js 10
We are excited to introduce Next.js 10, featuring: Built-in Image Component and Automatic Image Optimization: Automatically optimize images using the new next/image component Internationalized Routing: Start internationalizing your Next.js applications with built-in primitives Next.js Analytics: Measure and act on real user performance Next.js Commerce: An all-in-one starter kit for high-performan
https://serverless-frontend.connpass.com/event/279964/
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 UbieではユビーAI受診相談というサービスを開発しており、症状に関する質問をするページ（以下「質問ページ」という）を中心にアクセシビリティ向上のための様々な改善を進めています。 今回はその中の1つの事例をご紹介します！ Ubieでのアクセシビリティ推進の全体像が気になる方は弊社デザイナー3284さんの記事を読んでもらえたら嬉しいです！ 今回の課題：SPAでの画面遷移 SPAの画面遷移はスクリーンリーダー対応が漏れがちなポイントとして広く知られています。 SPAでない静的なウェブサイトでページ遷移した場合、スクリーンリーダーは次ページのタイトルを読み上げ、カーソル位置はページの先頭の要素に移動します。 しかしスクリーンリーダーに対応できていないSPAでページ遷移した場合、スクリーンリーダーは次ページのタイ
Next.jsに専用のESLintが追加された！
Next.js11がついに発表されましたね。 next/script、Next.js Liveなど、興味深い機能が色々ですが、自分が地味に嬉しかったのはNext.js専用のESLint設定がデフォルトでサポートされたことです。 create-next-appでESLint設定済みのNext.jsプロジェクトが作成できる ReactやNext.jsのプロジェクトを立ち上げる際、結構面倒くさい難しいのがESLintの設定です。 .eslintrcファイルの記述とか、extendsの記述順によって優先されるルールとかも変わってくるので、慣れないうちはなかなか難しい作業でしょう。（自分はいまだに試行錯誤してます…） しかし、今ではcreate-next-appを使うと、専用のESLintが設定済みのNext.jsプロジェクトを作成してくれます。 実際にコマンドを実行した結果を見ていきましょう。 $
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
【Next.js】チーム開発までの環境整備手順
大規模メディアにおけるNext.js とVercelのレンダリングとキャッ シュ戦略について
Next.js API Route の実装時に同じファイルでクライアントコードも実装すると嬉しい…
Next.jsのlayout.tsxで認証チェックすると情報漏洩するかも
Next.js 13 vs Remix: An In-depth case study
Next.js をAWSにデプロイする Amplify vs Serverless - ちょっと株式会社 社員ブログ
【備忘録】Next.js開発環境をDockerで構築(WSL2) - Qiita
AWS AmplifyでNext.jsのISRを試してみる | DevelopersIO
Blitz.js - The Missing Fullstack Toolkit for Next.js
View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
【PHPと一緒だなんて言わないで】Next.js@13.4によるZero API Web Application
Next.js 13 Template と Layout の使い分け
Next.js/Prisma/GraphQL Code Generatorを使ったモダンなWeb開発技術の解説書が発売／『Next.js、Prisma、GraphQL Code Generatorで作るフルスタックWebアプリケーション』【Book Watch/ニュース】
Next.jsのReact Hookへの最適化は一体何をしているのか - tosuke
話題のゼロランタイムなCSS-in-JSライブラリ「Panda CSS」をNext.jsに導入してみた
Next.js vs. Remix - A Developer's Dilemma
Next.js の「next start・next dev」挙動差分一覧
Nextra – Next.js Static Site Generator – Nextra
個人ブログをNext.jsのSSGからHonoのSSGに移行した
Next.js の Incremental Static Regeneration を理解する
VercelとNext.jsの機能を最大限に活用したA/Bテスト手法
SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと