View Transitions APIによるスムーズなページ遷移をNext.jsで簡単に試す
はじめに こんにちは、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,
Next.js 13 の cache 周りを理解する - Automatic fetch() Request Deduping
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping ← この記事 revalidate fetchCache (後日公開) Next.js 13 App Router の cache はむずかしい Next.js 13 以降 App Router と呼ばれる、app/ ディレクトリを起点とする新たなレイアウト・レンダリング機能が導入されました。 併せて、レンダリングを効率化するためのキャッシュ機構も大きく手を加えられました。 基本的には意識せずとも恩恵を受けられるものが多いですが、把握しておかないと意図しない描画に繋がる可能性もあるため、App Router を利用する場合には抑えておきたいところです。 App Router に対応している beta 版ドキュメント[1]に基本
Next.js の Interception Routes について
Next.js の Interception Routes について 2023.04.09 Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。 Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。 Intercepting routes ではブラ
Next.js 13.3
Next.js 13.3 adds popular community-requested features, including: File-Based Metadata API: Dynamically generate sitemaps, robots, favicons, and more. Dynamic Open Graph Images: Generate OG images using JSX, HTML, and CSS. Static Export for App Router: Static / Single-Page Application (SPA) support for Server Components. Parallel Routes and Interception: Advanced routing features for the App Route
ZOZOTOWNのWebホーム画面をNext.jsでリプレイスして得た知見 - ZOZO TECH BLOG
はじめに ZOZOTOWN開発本部の武井と申します。ZOZOTOWNのフロントエンドリプレイスプロジェクトを主に担当しております。ZOZO DEVELOPERS BLOG でも「ZOZOのリプレイスプロジェクトで得られる唯一無二の経験。大規模サービスを進化させるやりがいとは」というインタビュー記事を掲載しておりますので、もしよろしければこちらも併せてご覧ください。 さて、本題です。現在ZOZOTOWNではオンプレミスかつ、モノリスだった既存システムをマイクロサービスAPIに責務を分割したり、インフラをクラウドに移行したりしています。しかし、いわゆるWebのUIを構築するためのシステムは現在も既存システムに新機能開発や機能改修を行なっており、リプレイスに着手できていませんでした。 そこで、まずホーム画面から段階的にリプレイスすべく設計・開発を昨年から行ない、無事リリースできました。ZOZOT
Next.js製アプリケーションのコンパイルを約100倍高速化した話
Next.jsアプリケーションの開発時においてコンパイルが長時間に及ぶ問題が起きていたので、その原因を特定した手法と採用した解決策について記載します。 今回は結果的にコンパイル時間を100倍以上高速化することができました。 前提 今回の対応は以下のバージョンで行いました。 React@18.2.0 next@12.2.4 tailwindcss@3.2.4 postcss@8.4.14 Next.js の開発中に、コンパイル時間が長くなっていることに気づく 最近、Next.jsアプリケーションのローカル開発時に待ち時間が長くて生産性が低いのでなんとかしたい、という相談を受け、調査を開始しました。 まず、おもむろにyarn devでプロセスを立ち上げてみたところ、以下のようなコンパイル時間を示すログが表示されました。 yarn dev yarn run v1.22.19 $ next dev
next lint の結果を Reviewdog でプルリクエストに反映する - star__hoshi's diary
next lint の結果を Reviewdog に食わせて PR にコメントとして出したかったんだけど結構ハマったのでメモ。 普通に next lint を動かしてもだめ "scripts": { "lint": "next lint" } - uses: reviewdog/action-setup@v1 with: reviewdog_version: latest - name: Run reviewdog env: REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }} run: npm run lint | reviewdog -f=eslint -reporter=github-pr-review -filter-mode=diff_context -fail-on-error=true こんな感じでやってみたんだけど、
Next.js アプリケーションの共通コンポーネント開発 - クックパッド開発者ブログ
こんにちは。レシピサービス開発部のkaorun343です。クックパッドではスマートフォン向けページにおける開発者体験向上のために、レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話にて紹介したとおり、Next.jsとGraphQLを用いたモダンな環境へと移行を進めています。例えばモバイル端末からのアクセスでURLがトップページの / であれば Rails、レシピ詳細ページの /recipe/:id であれば Next.js アプリにルーティングされるようになっています。現在ではレシピ詳細ページだけではなく検索結果ページやつくれぽ詳細ページ、MYフォルダページなどもNext.jsアプリケーションに置き換わっています。今回はその移行により生じた課題と取り組み方、それから併せて実施したモノレポ環境整備について紹介します。 共通コンポーネントの導入背
Next.js 13.1
Back to BlogThursday, December 22nd 2022 Next.js 13.1Posted by Next.js 13.1 includes improvements to both the pages/ (stable) and app/ (beta) directories: app Directory (Beta) Improvements: Improved reliability and performance. Built-in Module Transpilation: Bringing next-transpile-modules capabilities into core. Edge Runtime (Stable): A light Node.js runtime for the Edge. Turbopack Updates: Suppo
Next.jsのコンテナからVercelへの移行とISRを有効化する際のハマりどころ - BOOK☆WALKER inside
こんにちは。 メディアサービス開発部Webアプリケーション開発課でフロントエンドエンジニアをしているnerikeshiです。主にTypeScriptでReactアプリケーションの開発をしています。 本記事では、コンテナで稼働させていたNext.jsアプリケーションのVercelへの移行と、それに付随して行ったISR導入時に起きたハマりどころについてお話しします。 本記事は同じWebアプリケーション開発課でバックエンドを担当しているフサギコ(髙﨑)との共同執筆記事です。 一迅プラスとは 以前の一迅プラス フロントエンドに関するインフラ構成の見直し Vercelへ移設するにあたって遭遇した迷いどころ、ハマりどころ DNSレコードの設定 SSL証明書 ISRページが404になったときのrevalidateの挙動について バックエンドがフロントエンドからのアクセスをIPアドレスで制限できない 一迅
Next.jsで戻る厨を満たすrecoil-sync-next
以前、Next.jsのスクロール位置復元について記事を書きました。 上記記事でSPAとMPA(Multi Page Application)における、ブラウザバック/フォワード時のスクロール位置復元について言及しました。 MPAではスクロール位置がブラウザによって復元されることがある(ブラウザの実装に依存) SPAではこれらが軽視されがち Next.jsにおいても、デフォルトでは復元されない(ChromeでSSGページなど一部条件下では復元される) Next.jsではexperimental.scrollRestorationを有効にするとスクロール位置をsession storageに保存し復元する これらと同様に、ブラウザバック/フォワード時のUI復元についても軽視されがちなものの1つです。最近もこの手のUI体験の悪さについて、問題提起がされ話題になりました。 ブラウザバック/フォワー
React がネイティブの fetch を patch しようとしてる話
Next.js のドキュメントには次のように記載されてる React will automatically cache fetch requests with the same input in a temporary cache. This is an optimization to avoid the same data being fetched more than once during a rendering pass - and is especially useful when multiple components need to fetch the same data. React が自動的に fetch request をキャッシュすると書いてある。
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへ - Qiita
Next.js x Relay な GraphQL 環境で Render-as-you-fetch の良さを最大限生かしつつ SSR にも対応したいあなたへRelayGraphQLNext.js はじめに 最近 Next.js ベースのプロジェクトに GraphQL クライアントとして Relay を導入したのですが、これが端的に言ってめちゃくちゃ大変だったので記事にしました。 チームの試行錯誤の結果を余すところなく伝えたいと張り切りすぎた結果死ぬほど長くなってしまったので、「いいからコードはよ」という方は 最終的にこんな実装になりました (コード編）をご覧ください。 謝辞 愛するチームメンバーのみんな。これまでの道のりで私を支え、愛してくれたみんながいなければ、この記事は完成できなかったと思う。 また、この記事が世に出せたのは、スーパーテクニカルアドバイザーである koichik さんの
Next.js 13
As we announced at Next.js Conf, Next.js 13 (stable) lays the foundations to be dynamic without limits: app Directory (beta): Easier, faster, less client JS. Layouts React Server Components Streaming Turbopack (alpha): Up to 700x faster Rust-based Webpack replacement. New next/image: Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift.
And here's another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages
And here's another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages2022-10-24 You can now deploy Next.js applications which opt in to the Edge Runtime on Cloudflare Pages. Next.js is the fourth full-stack web framework that the Pages platform officially supports, and it is one of the most popular in the 'Jamstack-y' space. Cloudflare Pages started
fastly/next-compute-jsの内部アーキテクチャを調べる
Fastlyから新たなNext.jsインテグレーションツールがリリースされていたので調べてみた。 モチベーションとしてはServerless Nextjs Pluginに移植してCloudflare Workersでも動かしたい。 fastly/next-compute-jsとは Compute@Edge でNext.jsアプリケーションを動かしたい時に使うツール。 以下に解説がある 使い方 Next.jsプロジェクトを作成 npx @fastly/next-compute-js@latest init でサブディレクトリcompute-js以下にCompute@Edge固有の構成を追加する fastly compute serve でローカルで起動する fastly compute publish でデプロイする compute-jsに何ができるのか WebpackとFastly CLI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsで「ISR・SSGをしない」という選択肢
Integrate Next.js and Storybook automatically
Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる
How to Fix Chrome's Failed to Load Response Data Error