概要 Pages Router から App Router 移行時に一部既存の画面での CSR 遷移が 404 エラーになりました。 この件について調査したので、記事にしてまとめておきます。 前提 今回発生したバグの内容の再現環境の特徴として、以下が挙げられます。 Next v13.5.6 Base path の設定あり App Router と Pages Router が共存している Base Path について Base Path の設定は next.config.js に以下のような記載があると、 module.exports = { basePath: '/base', } /pages/examples.tsx で配置したページコンポーネントが、 URL /base/examples で閲覧できるようになるものです。 また以下のような Link コンポーネントは、自動的に Ne

Next.js App Router TrainingIntroducing various basic patterns of app router with simplified code.

このエントリーは一休.com Advent Calendar 2023の15日目の記事になります。 CTO 室の恩田です。 現在は一休レストランのフロントエンドのリアーキテクトを手がけています。 今日はその中で Next.js App Router から Remix に乗り換えた話をご紹介したいと思います*1。 背景 6日目の記事で香西から紹介させていただきましたが、2023年10月に一休レストランのスマートフォン用レストラン詳細ページをリニューアルしました。 一休レストランの Rust バックエンドが正式リリースされました。https://t.co/7N4VGv5ej9 このページのスマートフォンビューはバックエンドが Rust で書かれた GraphQL になってます— naoya (@naoya_ito) 2023年10月4日 ちなみにフロントエンドも、旧バージョンは Nuxt v2

Next.js を使うプロジェクトでの開発をいくつか経験した結果、環境変数の取り扱いについての知見が溜まりましたので共有します！ サンプルリポジトリへのリンクを後半に記載しています。実装ベースで確認したい方は後半へどうぞ 💁‍♂️ Next.js 標準の環境変数機能に不足していること Next.js には標準で環境変数を管理する機能があります。（以後 .env と呼びます。） .env の方法は提供されている機能が最小限となっており、次の 3 つのタイミングに合わせてしか環境を切り替えることができません。 ファイル名 読み込まれるタイミング

Next.js で env をうまく扱うために僕がよく使う手法を紹介します。 Next.js がサポートしている env の扱い Next.js はデフォルトで大きく 2 つの方法で env をサポートしています。 .env ファイルの読み込み next.config.js の env キーに記述する .env ファイルの読み込み Next.js は .env ファイルを配置することで process.env に読み込む機能をデフォルトでサポートしています。なのでプロジェクトのルートに、以下のようなファイルを配置してください。

OGP は「環境を考慮しよう！」という画像です。 NextJS へ環境変数をセットする時、デプロイを考慮した上で.env を使いたい・ビルド時と起動時の環境変数がある・サーバーとブラウザでの環境変数があるといった風にややこしい点があり、自分はよく調べ直しています。 基本的には以下の 3 つの公式ドキュメントを見ればいいのですが、 Environment Variables Environment Variables(basic-features) Runtime Configuration 整備されたのが最近なので古い情報が定着していたり、ここに書いていない細かい挙動なんかもあったりするので、まとめて行こうと思います。 .env.* を使って読み込める Environment Variables にもある通り、.env.* を使うことで環境変数を読み込めます。 設定ファイルに環境変数を書い

App Routerについて色々調べたので、「Page Routerからどう変わったか？」を中心にいろいろ書きます。 ※Next.jsのバージョンは13.4です 🤗Page Routerから変わった点 「これだけ抑えておけばOK」な内容についてザックリ書きます。 特別な意味を持つファイルができた Page Routerではpages直下につくったファイルがすべてルーティングされました。 ですがApp Routerでは、app直下のpage.tsxと書かれたファイルだけがルーティングの対象になります。 ほかにも、layout.tsxと書かれたファイルを置いておくと「layout.tsxでpage.tsxを自動的にラップする」ができたりします👇

next/testmodeの導入の発端となったらしいIssue の中に次の記述がある I looked into this a month ago and discovered that there's difficulty to establish any process-wide logic in Next.js 13 due to the way Next itself is implemented internally. Very briefly, Next keeps two Node.js processes while it runs: これがどういうものなのかあんまり理解できてないので調べる

'use client'; import React, { useState } from 'react'; import { useServerInsertedHTML } from 'next/navigation'; import { CacheProvider } from '@emotion/react'; import createCache from '@emotion/cache'; import { createTheme, ThemeProvider } from '@mui/material'; const theme = createTheme(); const EmotionRegistry = ({ children }: { children: React.ReactNode }) => { const [emotionCache] = useState(()

Next.js 13からの新機能のApp Directoryを使用すると、CSS-in-JSライブラリであるEmotionを動作させることが出来ません。 Next.jsの公式サイトでも現在のところ未サポートとして記載されています。 Emotion側でも対応が進められていますが、現時点ではまだリリースされていません。 Workaround 上記のEmotionリポジトリのIssueに記載されている通り、現時点では以下のようなWorkaroundを使用することでEmotionを使用することが出来ます。 Emotion Cache Providerの作成 'use client'; import { CacheProvider } from '@emotion/react'; import { ReactNode, useState } from 'react'; import createCa

app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {

この記事は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

概要next/imageは画像を自動で最適化してくれる便利なコンポーネントです。 使用には基本的にサイズ（width, height）を事前に指定する必要がありますが、APIから画像を受け取って表示する場合など、事前にサイズを指定したくないケースがあると思います。 この記事では、そのような場合でもnext/imageを使って画像を表示する方法をご紹介します。 環境としては、Next 12.1.2 を使用します。 Next.js 13以上を使用する場合は、こちらの記事をご覧ください。

Next.jsのImage Componentはv13.0より新しくなり,古いものがImage Legacy Componentとされました.そのため,本記事にあるlayout='responsive'を用いた便利な方法は非推奨となります.取り急ぎで考えたシンプルな実装方法を以下に置いときます. 暫定のシンプルな実装方法 いずれにせよheightは設定しないといけないことになります.これはCore Web VitalsのCLSを損ねるからでしょうね. 記事内にあるlayout='fill'はv13.0からはfillをtrueにすることで指定できます.この方法を取るしか無いでしょう.また記事内で扱わなかったaspect-ratioを使用することで,短く書くことも可能です. また,objectFit='contain'も非推奨になったので,自分で追加すると良いでしょう. 以下例（Tailwin

こんにちは。ウェルスナビでソフトウェアエンジニアをしています水馬(@mizuma_t)です. 今回のテーマはフロントエンドモニタリングです。 みなさんフロントエンドのモニタリングは正しく行えているでしょうか？ 各ユーザの端末内で生した事象を正しくモニタリングするためにはサーバサイドとは異なる知見が求められます。今回は、AWS上でフロントエンドアプリケーション(Next.js)を運用するにあたってのモニタリングの知見をお伝えしたいと思います！ フロントエンドの「何を」モニタリングするのか？ ひとえにモニタリングといっても目的やサービスの特性に応じて期待されるモニタリングの範囲と意味合いが異なることが一般的です。 本記事では以下の項目に焦点を当ててAWSを用いたモニタリング手法について解説しています。 ユーザの端末内で発生したエラーを正しく検知できているか？ レンダリングサーバで発生したエラー

Lazy Loading Lazy loading in Next.js helps improve the initial loading performance of an application by decreasing the amount of JavaScript needed to render a route. It allows you to defer loading of Client Components and imported libraries, and only include them in the client bundle when they're needed. For example, you might want to defer loading a modal until a user clicks to open it. There are

2021年秋ごろ、副業のような形で Next.js による新規フロントエンド開発のお手伝いをさせていただくことになりました。プライベートの空き時間でフロントエンドの学習をし、今はひとまず開発できるようになってきた気がするので、これまで学んできたことをご紹介します。 基本の TypeScript, React, Next.js だけでなく、GraphQL の周辺ツールやテストについても学習しました。 これまで 当時、Web 系の受託開発会社にて主に Ruby on Rails でバックエンドの開発をしていました。TypeScript, React は学生の頃から趣味で書いていました。 テストは、Rails での開発なら RSpec や Capybara で書いていましたが、JS ではほぼやったことがありませんでした。GraphQL は全くの未経験でした。 やったこと React チュートリア

この記事は古くなってます。今はAPIが改修されたので改善しているはずです。 記事を修正する時間がないので取り急ぎ該当のPRを貼っておきます。 https://github.com/hoangvvo/next-connect/pull/166 からの https://github.com/hoangvvo/next-connect/pull/178 です。 https://github.com/hoangvvo/next-connect/blob/master/CHANGELOG.md#0121 next-connectを使うと、Next.js のAPI Routesをいい感じに書くことができるし、Expressのミドルウェアも扱えるようになって便利です。 // pages/api/hello.js import nc from "next-connect"; const handler =

【Next.js Update!】v12リリースを踏まえ、Next.jsの採用を考える 本発表は以下URLでアーカイブ視聴が可能です。https://youtu.be/KaS3bgz_CA4 イベントページ：https://forkwell.connpass.com/event/228457/

import type { FirebaseApp } from "firebase/app"; import type { Auth as FirebaseAuth } from "firebase/auth"; import { getApps, initializeApp } from "firebase/app"; import { getAuth, signInWithEmailAndPassword } from "firebase/auth"; /** * @description Firebaseの管理画面から取得したAPIオブジェクト * @note 環境変数は`.env.local`ファイルに定義しています */ export const firebaseConfig = { apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KE