Next.js の getServerSideProps & API Routes テスト手法についてまとめました。getServerSidePorps & API Routes に関するテストは「Cypress・Playwright」を利用することが多いと思いますが、本稿は Jest 単体テストの紹介です。以下はテストに使用するエコシステム一式です（Jest 等は略） msw node-mocks-http next-test-api-route-handler testing-library 1.pageExtensions を設定する 本題に入る前に、pageExtensions を next.config.jsに設定します。pageExtensions はpagesに含まれるファイルのうち、指定の拡張子をもつファイルが「Page・API 実装ファイルである」ことを指定するものです。
Common mistakes with the Next.js App Router and how to fix them – Vercel
After talking to hundreds of developers and looking at thousands of Next.js repositories, I've noticed ten common mistakes when building with the Next.js App Router. This post will share why these mistakes can happen, how to fix them, and some tips to help you understand the new App Router model.
7 principles for rich web apps And how next.js achieves these principles
ジャムスタックチョットデキル 2023/09/09
Back to BlogMonday, October 23rd 2023 How to Think About Security in Next.jsPosted by React Server Components (RSC) in App Router is a novel paradigm that eliminates much of the redundancy and potential risks linked with conventional methods. Given the newness, developers and subsequently security teams may find it challenging to align their existing security protocols with this model. This docume
Improved Next.js and Gatsby page load performance with granular chunking Stay organized with collections Save and categorize content based on your preferences. A newer webpack chunking strategy in Next.js and Gatsby minimizes duplicate code to improve page load performance. Chrome is collaborating with tooling and frameworks in the JavaScript open-source ecosystem. A number of newer optimizations
OpenAI API と React(Next.js) を利用した簡単な画像生成アプリの作り方を、サンプルコード付きでご紹介しています。 こんにちは、アノテーション テクニカルサポートの Shimizu です。 筆者の前回の記事では OpenAI API を使用した基本的な質問アプリを Next.js で作成しました。 そこで今回は OpenAI の画像生成 API を利用して、テキストで入力した通りの画像を生成してくれるアプリを作って遊んでみました。 本記事ではサンプルコード付きで画像生成アプリの作成手順をご紹介しています。 完成品イメージ 前回と同様に Docker コンテナ上の Next.js 環境で作成したアプリを、ブラウザ上で動かすという手順です。 それでは、いってみましょう！ step1. 事前準備 まず、事前に下記を用意しましょう。 (1) OpenAI のアカウント登録、A
作ったもの タイトルはSimple Newsです。 サイトURLは、 こちらです。 ソースコードは こちらです。 Google News を参考にしました。 どんな機能があるの？ NewsAPIからニュースサイトの記事のデータを取得し、タイトルと画像を表示 NewsAPIは、世界中のニュースサイトから検索をかけて、情報を取得できるAPI ( Application Programming Interface ) OpenWeatherMapから取得した、現在の天気情報と5日間の天気予報を表示 OpenWeatherMapは、現在の気象やある期間の気候の予測データを取得できるAPI ページ遷移が高速 記事をクリックすると、記事が掲載されているサイトへ飛びます。 こんな感じでとてもシンプルで高速に動くニュースサイトです。 こんな人に読んでほしい Next.jsを使ってみたい初心者 外部APIを
React Server Components allow developers to build applications that span the server and client, combining the rich interactivity of client-side apps with the improved performance of traditional server rendering. In the upcoming Next.js major release, React developers will be able to use Server Components inside the app directory as part of the changes outlined by the Layouts RFC. This post will ex
RemixをNext.jsで動かす
RemixをNext.jsのEdge API Routesで動かしてみたら、動きました。何が嬉しいのかわかりませんが、可能性の追求です。 Edge API Routes Next.jsのEdge API RoutesというのはVercelのEdge Runtimeで動くことを前提したAPIを生やす機能です。つまりWeb Standardベースのエッジで動くAPIが/api/*以下で動きます。 一方RemixはWeb Standardをベースにした環境でも動くことが売りで、Cloudflare Workers/PagesだけではなくVercelでも動きます。 ということはなんとなくVercelの上で動いているNext.jsのEdge Runtime Routes上でRemixを動かせそうな気がします。 Request/Response これ系の、つまりWeb Standardを使ったエッジで
Next.js 15 RCまとめ
基本的には以下のNext.js 15 RCのブログを翻訳してまとめたものになります。 TL;DR React 19 RC: React 19 RCとReact Compiler(Experimental)、ハイドレーションエラーの改善のサポート キャッシュ: fetchによるリクエストとGETによるRoute Handlers、クライアントナビゲーションのキャッシュをデフォルトで無効化 Partial Prerendering (Experimental): 段階的な採用のための新しいLayoutとPageの設定のオプション next/after (Experimental): レスポンスの後にコードを実行するための新しいAPI create-next-app: デザインのアップデートとローカル開発でTurbopackを有効化するための新しいフラグ 外部パッケージのバンドル (Stable
React Server Components, Next.js App Router and examples May 6, 2023 There were recently a number of discussions in the React community around the state of Server Components, the Next.js App Router and the future of tooling and rendering approaches. Here's my attempt at a brief summary of concepts and discussions for folks that want highlights. I also wanted to share (lower down) more "complete" A
Next.js ドキュメント非公式日本語翻訳サイト
次に、BudouXを使って、文章を解析して span タグで囲っていきます。 BudouX のパーサー自体は分割した文字列を配列で返してくれるところまでしてくれるので、あとはよしなに map して囲っていく処理を自分で書きます。 この処理はプロジェクトのあらゆる場所で使われることを想定し、 useBudouX() というフックで使えるようにしておきます。 hooks/useBudouX.tsx import { loadDefaultJapaneseParser } from 'budoux' const parser = loadDefaultJapaneseParser() export const useBudouX = () => { const parse = (text: string) => { return parser.parse(text).map((s) => (<s
なお、middleware.ts でリクエストログを出力してDatadogに構造化してもらうデモコードはこんな感じ。console.logでオブジェクトを文字列として出力している（そうすると1レコードにまとめてくれる）。 import { type NextRequest, NextResponse, userAgent } from "next/server"; import { getSession, withMiddlewareAuthRequired, } from "@auth0/nextjs-auth0/edge"; export default async function middleware( request: NextRequest, event: NextFetchEvent, ) { const response = NextResponse.next(); con
しばたです。 前の記事でNext.jsを試す環境を作ったので本記事ではCloudscapeを実際に試してみます。 Cloudscape Design Systemとは？ Cloudscape Design SystemはAWSが作成しオープンソースで公開しているWEBデザインシステムです。 もともとAWSが内部向けに作成し改善していたものが今年の7月に一般公開されました。 雑に言ってしまえば「マネジメントコンソール風のUIをつくれるやつ」なんですが、デザインシステムの名の通りUIコンポーネント以外にデザインパターンやデモも公開されています。 注意事項 本記事ではこちらの手順に従い最初の一歩を試してみようと思っていました。 Using Cloudscape components ただ、手順をよく読んでみると最後の最後に、 Bundling with Next.js (optional) Th
Next.js における環境変数まわりの挙動まとめ
OGP は「環境を考慮しよう！」という画像です。 NextJS へ環境変数をセットする時、デプロイを考慮した上で.env を使いたい・ビルド時と起動時の環境変数がある・サーバーとブラウザでの環境変数があるといった風にややこしい点があり、自分はよく調べ直しています。 基本的には以下の 3 つの公式ドキュメントを見ればいいのですが、 Environment Variables Environment Variables(basic-features) Runtime Configuration 整備されたのが最近なので古い情報が定着していたり、ここに書いていない細かい挙動なんかもあったりするので、まとめて行こうと思います。 .env.* を使って読み込める Environment Variables にもある通り、.env.* を使うことで環境変数を読み込めます。 設定ファイルに環境変数を書い
先日 Vercel の@leeerob氏が次のようなツイートをしていました。 I'm working on updated testing docs for the @nextjs App Router. next@canary supports Jest for server & client components, metadata, server-only, and more なんと next@canary で、Server Components の Jest でのテスト実行がサポートされているとのことです！これは試さないと！ next@13.4.19 時点での Server Components テストの課題 Next.js App Router で開発するときの大きな課題の一つがテストで、現状では Server Components と testing-library を組み合わ
Next.js 13.2
Back to BlogThursday, February 23rd 2023 Next.js 13.2Posted by Next.js 13.2 includes major improvements to the App Router (app) in preparation for stability: Built-in SEO Support: New Metadata API to set static and dynamic meta tags. Route Handlers: Custom request handlers, built on Web Request and Response. MDX for Server Components: Use React components inside Markdown, server-side only. Rust MD
Node.js の API がいつ入ったのかを調べる必要が出てきた。 もちろんリリースノートを見たり、ドキュメントの History を見れば調べられることが多いが、普通に面倒くさいので、いい感じの表とかを自動で生成できたら嬉しい。 どうやら公式ドキュメントは Markdown で管理されており、Added の情報はその Markdown の中のコメントに YAML として書かれているらしい。 なので、Markdown の内容を fetch して Markdown としてパースし、その中の特定のコメントをさらに YAML としてパースすることでデータがとれそうだった。 そして、そのデータをビルド時にひっぱってくる静的サイトがあればいつでも見れて便利だし、ビルド時にしか fetch しないので比較的行儀も良い。 ということで作ったみた。 実際のサイトはこちら https://nodejs-a
自分も同じ道を辿ってきて今はちょっと考え方が変わっているので自身の整理がてらmeijinさんの記事に乗っからせていただきます🙏 Re: 「A layout is UI that is shared between routes.」って書いているのでめっちゃめちゃ違う用途じゃないか？ export default async function Layout({ children }: { children: ReactNode }) { const supabaseClient = createSupabaseServerComponentClient(); const { data, error } = await supabaseClient.auth.getUser(); if (!data.user) { // This is unreachable because the use
ChatGPTのAPIをNext.jsに組み込んでAIがレシピを作ってくれるサービスの作り方を解説します。
revalidatePath & revalidateTag Next.js 13.4 から、Next.js App Router で利用可能な新しい API として revalidatePath と revalidateTag の２つが追加されました。 以前（Pages Router）からも任意タイミングでの revalidate のために On-demand ISR という手法が可能でしたが、これは revalidate 用にエンドポイントを用意した上で、特定パスの revalidate を行うというものでした。App Router ではセグメントや fetch 単位でキャッシュ制御を行うため、revalidate においても revalidatePath revalidateTag を用いることで、より柔軟に対応できます。 revalidatePath の動きをみてみる revali
サーバレスでフルマネージドなキャッシュサービスMomentoをRemixとNext.jsでためしてみた | DevelopersIO
世界初のサーバレスキャッシュサービス、世界最速のキャッシュサービスと謳っているMomentoをRemixとNext.jsでためしてみました。 はじめに こんにちは、CX事業本部Delivery部MADグループの森茂です。 Momentoは世界初のサーバレスキャッシュサービス、世界最速のキャッシュサービスと謳っているフルマネージドなキャッシュサービスです。アカウント登録から運用まで数分で使い始めることができます。現在は無料ですぐに使い始めることができます。SDKについても、下記のように主要な環境はほぼ網羅されています。 .NET Go Java JavaScript Python Rust CLI 今回はMomentoのキャッシュをRemixでつかってみます。また、ほぼ同じロジックで動作できるのでついでにNext.jsのSSRでも動作をためしてみました。 検証環境 M1 MacBook Pr
Next.js の v12.2.0 では、SWC plugin がサポートがされました 🎉 元々 Babel plugin や ESLint plugin などを作るのが好きで、これを機に SWC plugin を作成して Next.js に適用してみたので、それについて記事を残そうと思います。 作成する SWC plugin 今回は、babel-plugin-react-native-web を SWC plugin に置き換えて、Next.js の React Native for Web 用の公式サンプルを動かせるようにすることを目標にしました。babel-plugin-react-native-web は、次のような import/export 文の変換を行うプラグインです。 + import ReactNative from "react-native"; // 変換前 - i
React cache() で Next.js の Per-request Caching が実現できるのはなぜか
Next.js App Router では、リクエスト単位で処理をキャッシュする機構が存在し、ドキュメント上にも Per-request Caching として説明があります。 ひとつは、fetch() による Automatic fetch() Request Deduping で、単一リクエスト内で同一の fetch()リクエストが存在した場合、重複を排除し、最低限の実行としてくれます。これには特に設定などは必要なく、一定条件（GET かどうか、など）を満たしていれば自動的に最適化されます。 詳細は ↓ をご覧ください。 そしてもう一つ、React が提供する cache() 関数を実行することでも同様にリクエスト単位でのキャッシュが実現できます。 これは Automatic fetch() Request Deduping では対処できないケースで活躍し、DB からの直接のデータ取得
このサイトを Next.js App Router で実装し直しました。Server Components が扱えてなんか便利なやつです。 移行にあたって学んだことや App Router の嬉しいポイントなどを書いておきます。 スタイリングメソッドの移行このブログサイトのスタイリングは vanilla-extract で書かれていました。Next.js の最新ドキュメントでは App Router でも vanilla-extract をサポートしたと書かれていましたが、ランタイム JS を必要とする CSS in JS 同様に Client Components でサポートしていると書かれていました。vanilla-extract は CSS in JS ですが完全に静的な CSS に変換されるため、Server Components でも使えそうな気はします。が、ドキュメントがそう言
Google、フルスタックのWebアプリホスティング環境「Firebase App Hosting」パブリックプレビュー開始。AngularとNext.jsをサポート
Googleは日本時間5月15日と16日に開催したイベント「Google I/O 2024」で、Webアプリケーションのホスティング環境を提供する新サービス「Firebase App Hosting」のパブリックプレビューを発表しました。 Firebase App HostingはGitHubと接続することで、開発者がコードをGitHubにプッシュすると自動的にFirebase App Hostingにコードが取り込まれます。 取り込まれたコードはCloud Buildで自動的にビルドが行われて静的なコンテンツがレンダリングされ、動的なコンテンツはCloud Runにデプロイされ、Cloud CDNでコンテンツがキャッシュされることで、自動的にWebアプリケーションがデプロイされます。 対応するフレームワークはAngularとNext.jsです。いずれも手動での設定をすることなく、Fire
microCMSとNext.jsを組み合わせて、Jamstackなブログを作成することができるチュートリアルです。 前提利用サービス本記事では以下の2つのウェブサービスを利用します。どちらのサービスも個人開発においては無料の範囲で十分な機能を備えており、実績豊富なサービスです。最初にそれぞれのサイトトップより登録を済ませておきましょう。 microCMS：特に日本において市場をリードするヘッドレスCMSです。ブログのコンテンツ管理を担います。Vercel：フロントエンド開発向けのプラットフォームです。サイト公開におけるインフラやCI/CDを担います。 ソフトウェアバージョン下記のバージョンで開発を行なっています。バージョンの差異によって若干機能が異なる可能性があります。 Next 13.1.1react 18.2.0react-dom 18.2.0microcms-js-sdk 2.3.2
Incrementally Adopting Next.js
Back to BlogWednesday, November 18th 2020 Incrementally Adopting Next.jsPosted by Next.js has been designed for gradual adoption. With Next.js, you can continue using your existing code and add as much (or as little) React as you need. By starting small and incrementally adding more pages, you can prevent derailing feature work by avoiding a complete rewrite. Many companies need to modernize their
GitHub - catnose99/next-head-seo: A light-weight SEO plugin for Next.js.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Google I/O 2024で発表されたFirebase App HostingでNext.jsのSSRを試す
先日のGoogle I/O 2024でFirebaseの新機能が発表されました。 これを読んでいて気になったのが、App Hostingという機能です。どうやらAngularとNext.jsのSSRをサポートしてくれるようになったようです。 自分はboobyというOSSコントリビュートしやすそうなリポジトリを探せるサービスを過去にリリースしています。 これのホスティング先として最初に検討していたのがFirebase Hostingでした。が、「？SSRどうやって動かすんだ？」と思いながらデプロイのための調査をしていたところ、どうやらCloudRunなどのサーバーサイドランタイムも使いながらでなければ動かせないということに行きつきました。 これまでやってきたCSRのHostingと異なり色々と手間が増えるなという結論に至り、結果初期構築が楽なVercelにデプロイすることにしました。当時の奮
全体の概要 基本的なAPI結合 基本的にはフロント(Next.js)からaxios等を利用して、サーバー側のAPIエンドポイントに対して直接リクエストを送る構成かと思います。 今回紹介するNext.jsのAPI Routesを中間APIとして挟んだ場合 今回紹介する構成は下記のようになっています。 この構成にするメリット・デメリットは後の章で解説をしていきます。 この記事の対象者 フロントエンド初級者から中級者 Next.jsのAPI Routesの基本を学びたい人 セキュリティーを考慮したAPI通信手法について知りたい人 Next.jsのAPI Routesを中間APIとして挟むメリット セキュリティーが強化できる ログの管理ができる APIエンドポイントの抽象化 セキュリティーが強化できる Next API Routesを中間APIとして挟むことで、外部から直接本体のAPIにアクセスさ
Next.js テンプレートを作ってみました | with TypeScript, Jest, Cypress, Sentry, GTM, ESLint, etc. - mlog
Next.js 用のテンプレート を作ってみたので、テンプレートの内容について、簡単に解説したいと思います。 2020/06/02 時点でテンプレートに含まれる内容は以下の通りです。 Next.js TypeScript Googleタグマネージャー CI/CD (GitHub Actions + Netlify) Jest (+ Enzyme) Cypress ESLint Prettier stylelint EditorConfig husky Material-UI styled-components Sentry ※ 上記以外の項目については、テンプレート中の package.json などを参考にしてください。 目次 目次 はじめに ベース 構成 プロジェクトルート 環境変数 Google タグマネージャー Google アナリティクス テスト Jest (+ Enzyme)
GitHub - vercel/platforms: A full-stack Next.js app with multi-tenancy and custom domain support. Built with Next.js App Router and the Vercel Domains API.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Vercelはとても良いサービスなのだが、ProプランだとBandwidth 〜1TB/月の制限があり、それを超えるとEnterpriseプランに入る必要がある 追記: 従量課金が採用された！Vercel Proプランの料金体系の変更とNext.js での対策に関して Next.jsのget○○Propsの中で重い処理をやると制限に引っかかる可能性がある。Vercelが内部的にはAWS Lambdaで動いており、そもそもLambda側の制限が厳しいという側面がある。 とはいえNext.jsをVercel以外で動かした場合にIncremental Static Regeneration（ISR）が実現できるのかあまり分かっていない そんなわけでVercel以外でNext.jsのISRをやるとどうなのかの情報をまとめてくスクラップ。 何かご存知の方はぜひコメントをお願いします🙏
Next on Netlifyプラグインを使ってNext.jsのサーバ機能をNetlifyへデプロイする - GMOインターネットグループ グループ研究開発本部
2021.01.06 Next on Netlifyプラグインを使ってNext.jsのサーバ機能をNetlifyへデプロイする こんにちは。F.S.です。 近年、Webフロントエンド界隈ではJamstackによる静的サイトの生成（SSG）＆ホスティングが盛んになってきている印象を受けます。筆者はReactの経験はあれどどちらかというとサーバサイドエンジニアをメインにやっていてSSGはそれほど明るくないのですが、サーバレスの潮流もあってこの分野に注目し始めました。 Jamstackサイトのホスティングについては、Jamstackというワードを生み出したパイオニアであるNetlify、Next.jsの開発元であるVercelがありますが、CDN等で著名なCloudflareも同機能を準備しているのではないかという情報もあります。 今回はバージョン10が登場して勢いがあるNext.jsで作られた
Next.js 13.3まとめ
基本的には以下のNext.js 13.3のブログを翻訳してまとめたものになります。 TL;DR ファイルベースのメタデータAPI: サイトマップ、robots、ファビコンなどの動的な生成 動的なOG画像: ビルトインのJSXとHTML、CSSを使用したOG画像の生成 Appルーターの静的エクスポート対応: サーバーコンポーネントの静的サイト・SPA対応 並行ルートと横取りルート: Appルーターの拡張的なルーティングの機能 また、Appルーターは次のマイナーリリースで安定版になる予定のようです。ついにですね。 アップデート詳細 ファイルベースのメタデータAPI Next.js 13.2で登場した設定ベースのメタデータAPIに加えて、ファイルベースのメタデータAPIとして以下の新しいファイル規約に対応しました。 opengraph-image.(jpg|png|svg) twitter-im
【Next.js】新規プロダクトのフロントエンドにおけるディレクトリ構成 - 通信レイヤー編 | Offers Tech Blog
概要 こんにちは、Offers を運営している株式会社 overflow でフロントエンドのテックリードをしている Kazuya です。今回は、筆者が担当しているプロダクト「Offers MGR(オファーズマネージャー) 」で採用しているディレクトリ構成の一部について書かせていただきます。 後述しますが、「Offers MGR」では求められる要件が複雑且つ通信で取得する情報量が膨大であることからAPI関連のディレクトリ構成もやや特殊なものになっています。ベースは以前こちらの記事で紹介した「Viewsレイヤー」を拡張させる形になっています。 専用構成になっている感があるため、参考になるかは分かりませんが、ぜひ最後まで読んでいただけると幸いです。 Offersのディレクトリ構成はこちら 弊社フロントエンドのボスであるAhomu先生が担当されているOffers側のディレクトリ構成は以下の記事をご
Next.js 11.1
We're improving build performance across the entire stack with Next.js 11.1, featuring: Security Patch: An important update to prevent potential open redirects. ES Modules Support: Enable today with an experimental flag. Rust-based Tooling: SWC integration to replace JS tooling (Babel and Terser). Faster Data Fetching: 2x faster data fetching with HTTP keep-alive when pre-rendering. Faster Source
Configuring: MDX | Next.js
Markdown and MDX Markdown is a lightweight markup language used to format text. It allows you to write using plain text syntax and convert it to structurally valid HTML. It's commonly used for writing content on websites and blogs. You write... MDX is a superset of markdown that lets you write JSX directly in your markdown files. It is a powerful way to add dynamic interactivity and embed React co
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Testing Next.js - getServerSideProps & API Routes -
How to Think About Security in Next.js
Improved Next.js and Gatsby page load performance with granular chunking | Articles | web.dev
Next.js + OpenAI API で作った画像生成アプリで遊んでみた | DevelopersIO
Next.js+TypeScriptでシンプルなニュースサイトを作ってみた。 - Qiita
React Server Components with Next.js – Vercel
React Server Components, Next.js App Router and examples
Next.js 非公式日本語翻訳ドキュメント
Next.js (React) で BudouX を使って日本語の改行を整える
Next.js AppRouterのエラートラッキング・ロギング手法で悩む
Next.jsでCloudscape Design Systemを試してみた | DevelopersIO
Next.jsでServer Componentsがちょっとだけテストできるようになってた
Next.js で Node.js の API がいつ入ったのかわかる表を作る
Re: Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
ChatGPTとNext.jsでAIがレシピを考えてくれるサービスを作る
Next.js Server Actions と revalidate 周りの挙動を確認する
SWC plugin を作成して Next.js に導入してみた
ブログサイトを Next.js App Router に移行したので学びを書く | stin's Blog
microCMS + Next.jsでJamstackブログを作ってみよう
Next.jsのAPI Routesを中間APIとして使う方法
Vercel以外でNext.jsのISRをできるのか問題