SSGにNext.js以外を使わなくてもいい時代に、私は、Vikeを使いたいのです2024/02/14 「なぜSSGにVikeを使うのか」というタイトルにしたかったんですが、ゼクシィのCM構文が流行っているような気がして、乗っかってみました。あの雑誌を読んだことがないので、どういった層をターゲットに作られているのかかなり気になっています。 Vikeについてここでは紹介しないので、適宜 https://vike.dev を見てください。いつの間にか vite-plugin-ssr が名前を変えてマイティ・ソーになっていました。 なぜSSGにVikeを使うのか簡素よくある Next.js is too much for us というモチベです。 fetchのキャッシュまで望んでいなかったり、案外作りたいものはfile based routingさえ枠組みがあれば他は自分で組みたいし、複雑なもの
どーも、入田 / ぐるたか @guru_taka です！ 本記事では Next.js (TypeScript) を環境構築し、ESLint（読み方：イーエスリント）と Prettier（読み方：プリティア）を導入する方法を紹介します。Next.js のバージョン 11 に対応しており、デフォルトで搭載されている ESLint の設定ファイルをベースとしています。 ESLint と Prettier を駆使することで、コードが綺麗になるため、導入することを強くオススメしたいです。本記事では、VS Code 上で、ESLint で構文解析しながら、ファイル保存時に ESLint + Prettier によるコード整形する方法をハンズオン形式でまとめています。
Next.js14 の PPR(Partial Prerendering)は、画面表示速度を改善するか? - Qiita
Next.js14 の PPR(Partial Prerendering)は、画面表示速度を改善するか?フロントエンドReactNext.js Motivation Next.js 14 の新機能1の一つ、Partial Prerendering(PPR) に関する記事はすでに多数あるが、PPR を導入することで実際に何がどう変わるのかについての情報が乏しいような気がしており、その辺りを自分で動かして確認しようというのが本記事の目的である。 PPR とは We'd like to share a preview of Partial Prerendering — a compiler optimization for dynamic content with a fast initial static response — that we're working on for Next.js
Next.js 14.2
Next.js 14.2 includes development, production, and caching improvements. Turbopack for Development (Release Candidate): 99.8% tests passing for next dev --turbo. Build and Production Improvements: Reduced build memory usage and CSS optimizations. Caching Improvements: Configurable invalidation periods with staleTimes. Error DX Improvements: Better hydration mismatch errors and design updates. Upgr
このリポジトリ でやったこと。 やろうとしたこと tailwind.css は Utility First と銘打った CSS フレームワークで、コンポーネント化を前提としたモダンフレームワークと相性がいいです。今回は next.js の amp-mode で tailwind を使おうとしてみました。 Tailwind CSS - A Utility-First CSS Framework for Rapidly Building Custom Designs 問題 前提として、 amp には inline css の容量制限があり、75kb を超えると AMP と認識されなくなります。 tailwind はビルドして使うのが前提のフレームワークですが、全部入りの tailwind.min.css は 1.3 M あります。これでは到底、75 kb に収まりません。 AMP の CSS
どういうこと？ 少し前に、CSS プロパティを自動ソートすると gzip 時のビルドサイズを減らせる記事を見ました 👇 これにならい、JSX の Props もソートしたら同じようになるんじゃね？って思って試したら、ビルドサイズを減らすことができたので、この場を借りてその知見を共有したいと思います 💪 検証環境 パッケージ名 バージョン
【ハンズオン】Next.js × Go × AWSでJWT認証付きGraphQLアプリとCI/CDを構築してみよう - Qiita
■ご案内■ 本内容は合計４つの記事で構成されています。 【環境構築編】 👈いまここです 【Next.js編】 【Go編】 【AWS編】 これからも頑張ってハンズオン系の記事を書いていきたいと思っているので、いいねっと思って頂けたらLGTM押していただけると励みになります！ 作成に至った背景 普段エンジニアの皆さんは、業務用に新しいライブラリやツールを調べたり、趣味で新しい言語やフレームワークを使ってサンプルアプリを作ってみる方は多いと思います。 エンジニアになって歴は浅いものの、私も例に違わず、業務前後や休日を使って趣味の延長でコードを書いていました。 ある日、ふと自分のGitHubリポジトリを見返してみると、それなりに多くの"インプットの跡"に気づきました。 "使えそうなプロジェクトを合体"してみれば、それなりのボリュームにもなるし、何よりGitHubの藻屑となりえたこの子達にも少し
今回は Next.js を使って Jamstack なブログを作る方法を紹介します。 ゴール 本チュートリアルでは最終的に以下の構成のブログサイトを作ります。 ページ構成 / フロントページ ├ /archive （なし） └ /archive/[page] 投稿一覧ページ └ /posts （なし） └ /posts/[slug] 投稿詳細ページ 「フロントページ」「投稿一覧ページ」「投稿詳細ページ」の 3 つだけのシンプルな構成です。 投稿の管理方法 frontmatter 付きの Markdown ファイル 利用技術 / サービス サイト生成: Next.js コードホスティング: GitHub ビルド・ホスティング: Netlify その他: Google Fonts / Google Analytics リポジトリ 今回作成したサンプルは GitHub 上に置いているので興味のあ
Flutter、Dart、Next.js、TypeScriptのどれを学べば良い。フリーランスエンジニアが語るフロントエンドの最前線 - Findy Engineer Lab
2021年5月27日（木）、Findyが主催するエンジニア向けイベント「フリーランスエンジニア会議〜フロントエンド開発案件の最新トレンド編」がオンライン上にて開催されました。 使いやすく魅力的なアプリケーションやWebサイトのUIを実装できるフロントエンドエンジニアのニーズは、業界を問わず増加傾向にあります。 しかし、サーバーサイドと比較すると業務委託の案件数においてはまだまだ数としては少なく見えます。 サーバーレスなどの普及で、主にスタートアップ企業からのフロントエンド完結型の開発が増えてくると予想されます。 今回は、あしたのチームでフロントエンドのテックリードを担当し、フリーランスエンジニア経験もある塩野様と、デザイン・フロントエンド開発領域においてご活躍されているフリーランスエンジニア山根様にご登壇いただき、今後のフロントエンド開発における業務委託案件の推移と傾向を語っていただきまし
この記事では紹介してないものも載せてます。 既に実装済みなとこは省略 簡単に説明すると、Vercel上のNext.js製のWebアプリを作り、CMSはmicroCMSを利用してAPI経由でデータ（記事）を取得・表示させたWebアプリです。今回は「いいね機能」だけにフォーカスしているのでそれ以外の実装済みの部分は割愛しています。 記事に関する処理や表示に関して 簡単に説明します microCMSを使ってAPI経由でデータを取得 主に記事の一覧ページと詳細ページがある構成 getStaticPathsとgetStaticPropsをつかってSGしてます ルーティングはDynamic Routingを用いています 参考 ディレクトリ 「いいね」機能を実装するにあたって、関連するディレクトリとファイルを以下に示します。 ディレクトリ構成の図解 . ├── src │ ├── component
本ドキュメントは公式ドキュメントの v14.1.0 の断面を翻訳したものです。Next.js の公式 X アカウントにもポスト頂きました。 公式ドキュメントのアップデートに追随して適宜更新しますが、最新情報が反映できていない可能性があります。 一部翻訳途中のページがありますが、随時翻訳を追加予定です。 Next.js の App Router は、React の最新機能を使ってアプリケーションを構築するための新しい方法です。すでに Next.js に慣れ親しんでいる方であれば、App Router が既存のファイルシステムベースのルーターである Pages Router の自然な進化形であることがわかるでしょう。 新しいアプリケーションには、App Router の使用をお勧めします。既存のアプリケーションについては、段階的に App Router に移行できます。同じアプリケーションで両
初めに 最近自分がNext.jsをやる案件がとにかく増え、ディレクトリ構成が固まってきたのでここに置いておきます。 何か意見あれば是非いただけると嬉しいです。 個人的に最近流行りのfeaturesはやりすぎだと思っていたのですが、結局開発していくとfeaturesのようなディレクトリを切った方が合理的な場面が多々出てきたのでこうなった次第です。 設計時に参考にした記事 こちらのReact TypeScript Cheatsheetに、Recommendationとして載っているbulletproof-reactを参考にしました。 構成 例として飲食店のウェブサイトで、コース（course）という機能を持たせるとする。 ├─ components/ │ ├─ elements/ │ │ └─ Button │ │ ├─ Button.stories.tsx │ │ └─ Button.tsx
はじめに こんにちは、minne事業部Webエンジニアの@inowayです。7/6に公開したtwadaさんによる2023年度版TDDワークショップを開催しましたの記事に執筆者の一人として参加していました。単独での記事公開は今回が初めてです。 @t_wada さんのワークショップを通して、自動テストの重要性を改めて実感しました。参加後に、おすすめされていた『テスト駆動開発』や『単体テストの考え方/使い方』を読み、今では完全に自動テストの魅力にはまっています。 参加直後は「実務でTDDを実践するぞ！」と息巻いていましたが、タイムリミットのある状況下で慣れない開発手法を実践するのは心理的ハードルが高く、Red->Green->Refactoringのステップを踏みながら開発することができていませんでした。そこで、本記事では「TDDに慣れる」をテーマに、TDDで機能追加することに挑戦します。アジャ
始め Pre-renderingって全部同じ Pre-rendering じゃなかったですね 1. Pre-rendering SPAではページをロードする時、まず空の html を読み込んで JS ファイルも読み込んでその JS が画面をレンダリングします。このやり方では SEO でデメリットがあったりファーストビューが遅くなったりする問題があります。 この問題を解決するため、 Next.js は基本的にすべてのページを Pre-rendering します。これはクライエント側の JS がレンダリングする代わりに、各ページに対して html を予め作っておくことを意味します。そうするとパーフォーマンスでも SEO でもより良い結果が出せます。 こうやって生成された html は必要最小限の JS コードに繋げられます。ページがブラウザにロードされるときにその JS コードも実行され、ペー
Beyond JAMstack: Next.js creator on hybrid rendering, TypeScript and Visual Studio Code
Guillermo Rauch: 'One of the biggest performance issues that we see today is to do with advertising' Interview Guillermo Rauch, creator of the Next.js framework for building React applications, spoke to The Register about the just-released Next.js 9.3 and its hybrid approach to web application development. Rauch has been an advocate for the JAMstack for client applications, where JAM stands for "J
Building an interactive WebGL experience in Next.jsBring your creativity to life with the web's 3D graphic rendering API. WebGL is a JavaScript API for rendering 3D graphics within a web browser, giving developers the ability to create unique, delightful graphics, unlike anything a static image is capable of. By leveraging WebGL, we were able to take what would have been a static conference signup
Angular without SSR is faster than Next.js with SSR. I have the data.
"If we really want to make our website faster, we should just rewrite it in Next.js." I think you'd be hard pressed to find a tech startup anywhere without at least one developer who is constantly saying this. But is it actually true? I certainly had no reason to doubt it. As someone who had just done the big upgrade from AngularJS to Angular, I was happy that all those months of work had resulted
GitHub - hoangvvo/next-connect: The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2
// pages/api/user/[id].ts import type { NextApiRequest, NextApiResponse } from "next"; import { createRouter, expressWrapper } from "next-connect"; import cors from "cors"; const router = createRouter<NextApiRequest, NextApiResponse>(); router // Use express middleware in next-connect with expressWrapper function .use(expressWrapper(passport.session())) // A middleware example .use(async (req, res
前回、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ア
Fullstack app with TypeScript, Next.js, Prisma & GraphQL - GraphQL API
Table of contents Introduction Development environment Clone the repository Seeding the database A look at the project structure and dependencies Building APIs the traditional way: REST REST APIs and their drawbacks Each REST API is different Overfetching and underfetching REST APIs are not typed GraphQL, an alternative to REST Defining a schema Defining object types and fields Defining Queries De
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.js13で追加されたApp RouterとReact Server Components──UI通信の関係を再定義する
App RouterはReact Server Componentsを最大限活用する形で実装されているため、外部のデータソースに対する送受信の大半をサーバー側で行います。少し独特ながら、Web標準に寄り添った形で実現された通信周りのフレームワークについて、本記事では学んでいきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Sonoma 14.2.1 Node.js 21.4.0／npm 10.2.4 React 18.2.0 Next.js 14.0.4 UIと非同期通信の状態管理を擦り合わせるのは疲れる ブラウザ上でもサーバー上でも、JavaScriptのランタイムが提供する通信処理のAPIは、基本的に非同期で扱うことが推奨されています。現代
ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した | EringiDev
タイトルのとおり、ShopifyのStorefront APIを使用してNext.js製のECフロントを構築しました。 仕事でECサイトのフロントエンドを構築しているので、そこで培った技術とかノウハウを完全に自分のものとして公開できる何かがほしいなと思ったのが作り始めたきっかけです。 できあがったものCSSをほぼ書いていない状態なので、見た目に関してはご容赦ください。。 https://eringiv3-shopify-store-front-with-nextjs.vercel.app/ リポジトリhttps://github.com/EringiV3/shopify-store-front-with-nextjs 出来上がったものの解説商品一覧、商品詳細、カートトップのECサイトに必要だと思われる最低限の機能を持つ3ページを備えた構成ログインはできない購入確定画面はShopifyが提供
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
2023年夏休みの自由研究がてら、約6年メンテナンスされていなかった Next.js で作られたサイトの開発環境をアップデートしました。Next.js に関しては、なんと v3 から v13 に一気にアップデートでした。 ただやっただけだともったい無いので、せっかくなので記事に残そうと思います。同じように Next.js で作られたサイトのメンテナンスを怠っている人に届いて、何か少しでも助けになれれば幸いです。 背景 まず、アップデートをしようと思った最初のきっかけは、M1/M2 Mac で Node.js を使って普通に開発ができないことでした。6年間メンテされてなかったこともあり、この環境の Node.js のバージョンは v8.4.0 です。（当時はもちろん最新でした😂） Node.js v16 未満のバージョンを M1/M2 Mac にインストールして使うには、以下の記事のように
【Next.js × @vercel/og】セミナー登壇者風に誰でも予定を告知できるアプリを作りました - Qiita
はじめに 突然ですがみなさん、 X（旧Twitter）でこんな感じのイベント告知画像を見たことはありますか？ 最近はセミナーや講演会に登壇する人たちが、イベント告知のためにこのような投稿をすることが増えているように感じます。 そして、こうした投稿を目にするたびに、自分は次のようなことを思います。 人生で １ 回でいいから！！こんな感じで予定を告知してみたい！！なんかすごそう！！ そんな（超どうでも良い個人的な）欲求を叶えるため、「誰でもセミナー登壇者風に予定を告知できるアプリ」 を作りましたので、簡単に紹介したいと思います。 （本当はクソアプリ Advent Calendarに投稿したかったけど、諸々の事情により断念） 作ったもの Seminar Post Generatorという 「セミナー登壇者風に個人的な予定を告知できるWebアプリ」 を作りました。 ▼サービスURL ▼リポジトリ
Next.js 13.5
Back to BlogTuesday, September 19th 2023 Next.js 13.5Posted by Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Refresh): For faster iterations when saving changes 40% less memory usage: Measured when running next start Optimized Package Imports: Faster updates when using popular icon
この本の概要 最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん，パフォーマンスを上げるための知識や関連ライブラリまで，詳細なサンプルコードをもとに解説していきます。 こんな方におすすめ 最新のNext.jsに入門したいエンジニアやNext.jsに多少の経験があるが，より良い使い方を知りたいエンジニア 第1章：Next.jsの基礎 1.1：Next.jsプロジェクトの始め方 1.2：アプリケーションのルーティング 1.3：SPAならではのナビゲーション 1.4：ネスト可能なレイアウト 第2章：Server Componentとレンダリング 2.1：Server ComponentとClient Component 2.2：Server Componentのデータ取得 2.3：動的データ取得と静的データ取得 2.4：Routeのレンダリング
この記事は？ 著者はエンジニアとしてAWS環境でのNextJSを用いた新規開発を行ってきました。その中で、ServerActionsは目を引く新技術です。本記事ではServerActionsを現場で使うテクニックを紹介します。既にAmplifyなどでも対応している内容なのでご気軽にお試しいただけます。 ServerActionsは何を解決するのか？ ServerActionsでは、form要素のactionに'use server'をつけた関数を渡すことで、JavaScriptでなくHTMLの機能だけを用いてサーバーにデータを送信することを可能にします。これによって、クライアンド側でJavaScriptがDOM処理を介する際に発生する、所謂ハイドレーションを待たずにユーザーが画面操作可能となるメリットを享受できることはServerActionsの1つの特徴です。何よりNext.jsがSer
React や Next.js を採用して Web アプリケーションを開発していく際に必ず欲しくなる検索機能ですが、自前での実装は意外と困難です。 その一方で、algolia や Elastic Search を用いることで比較的用意に実装が可能かつある一定量までは無料で使用できるため、初期のプロダクトへの導入がオススメです。 今回は fwywd（フュード） のページへの検索機能を追加する具体的な手順を解説します。
Next.js Weekly #29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget
#29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget Next.js Conf 2023 – This year’s Next.js Conf primarily focused on stabilizing existing features rather than introducing new ones. I recommend checking out the VoD. Here’s a quick summary of all the announcements: Next.js 14: No new APIs – As mentioned, it’s all about stability. So Next.js 14 comes with no
Next.jsを勉強してみる その① 〜何も考えず環境構築編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。 とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。 Next.jsとは Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。 今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。 とりあえず、立ち上げるまで頑張ってみる next.jsインストール # ルートディレクトリにsrcフォルダを作成・移動 mkdir src && cd src # Next.jsのアプリケーションの雛形を作成 $ npx create-next-
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
Caching in Next.jsNext.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. Good to know: This page helps you understand how Next.js works under the hood but is not essential knowledge to be productive
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】 - Qiita
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】Rails未経験個人開発Next.js はじめに こんにちは、とぴ（@topi_log）と申します。 オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。 4/26にメモ帳感覚で使えるGitHub草生やしアプリをリリースしたので、アプリ紹介と技術、感想をまとめさせていただきます。 目次 作成経緯 Webアプリ紹介 技術スタック こだわったところ UI/UX 技術面 その他 改善点・不具合 追加したいと考えている機能 ブラッシュアップの方針 感想 1. 作成経緯 オンラインプログラミングスクールにて、「ミニアプリweek」という短期間でアプリを作るイベントがあります。バグOK
5 Lessons Learned From Taking Next.js App Router to Production - Inngest Blog
Next.js 13 introduced the new App Router that offers several new features, including Nested Layouts, Server Components, and Streaming. It’s the first open-source implementation that allows developers to fully leverage the primitives brought by React 18. It was in beta for a while, but since Next.js 13.4, which was just released, it’s now considered production-ready. We recently redesigned the Inng
GitHub - shadcn-ui/taxonomy: An open source application built using the new router, server components and everything new in Next.js 13.
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
Next.js で開発していると、複数のページの getServerSidePropsで同じようなコードを度々書くことになると思う。例えば 「GraphQL クライアントでクエリを fetch して、そのレスポンスをpagePropsに焼き込むロジック」であったり、「(マルチテナントアプリケーションにおいて) リクエストヘッダーからテナントを特定するロジック」であったり。こうした大部分のページで使われるロジックのコードは、何度も書かずに済むよう、何らかの共通化をしたくなる。 すでに色々な人が似たような動機でgetServerSidePropsを共通化する方法を紹介していると思う。それを参考にしながら id:mizdra も自分流の共通化方法を実践している。何度か Next.js アプリケーションを作っているうちに、自分の型のようなものが身についてきたので、それを紹介してみる。 はじめに結論
JSer.info #656 - Next.js v13.4.16がリリースされています。 Release v13.4.16 · vercel/next.js v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。 Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないなどの問題がありました。このtest modeではそれらが一部解決されてきています。 Support Next.js 13 (App directory) · Issue #1644 · mswjs/msw まだ検証目的の実験的な機能であるため今後はわかりませんが、次のDiscussionでNext.jsを使ったアプリケーションのテストについて議論されています。 RFC:
「なんだか Next.js の Static Generate に使っている外部 API 呼び出し回数が多いような？」と思っている方へ。閲覧されもしないページを、ISR（Incremental Static Regeneration）でみだりに再生成していませんか？本稿では、Link コンポーネントの振る舞いと ISG / ISR の組み合わせの際、注意したい prefetch の設定について言及します。 ISG のおさらい ISG（Incremental Static Generation）は、Next.js がオンデマンドでページを静的生成するアプローチです。「オンデマンドで静的生成する」ことで、ビルドタイムの静的生成をスキップすることができます。 getStaticPaths の fallback オプションを true か 'blocking' にすることで発動します。 これは膨大
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
SSGにNext.js以外を使わなくてもいい時代に、私は、Vikeを使いたいのです
Next.js (TypeScript) に ESLint と Prettier を導入し、コードを綺麗に保とう | fwywd（フュード）powered by キカガク
next.js の amp モードで tailwind.css を purgecss と合わせて使う
Next.js で Props をソートすると gzip 時のビルドサイズを少しだけ減らせる
Next.js を使った Jamstack なブログの始め方
Next.jsとFirestoreを用いたmicroCMS記事の「いいね」機能の設計と実装
App Router | Next.js 公式ドキュメント 日本語翻訳プロジェクト
Next.jsディレクトリ構成・設計再考（featuresが何を解決するか）
TDDでNext.jsアプリに機能追加してみた - Pepabo Tech Portal
SSG と SSR で理解する Next.js のページレンダリング
Build an interactive WebGL experience with Next.js – Vercel
Next.js App Router 知られざるClient-side Cacheの仕様
Next.js の Interception Routes について
Next.js を v3 から v13 に一気にアップデートした話
実践Next.js ——App Routerで進化するWebアプリ開発
【Next.js】Server Actionsを現場で使うテクニック
React / Next.js に algolia を導入して検索機能を追加しよう | fwywd（フュード）powered by キカガク
Firebase App HostingにNext.jsがデプロイされる仕組み
Building Your Application: Caching | Next.js
Next.js の getServerSideProps を共通化する - mizdra's blog
2023-08-16のJS: Next.js v13.4.16(test mode)、SafariのStorage Policy、ESMへの移行(Redux)
Link と ISR が引き起こす Next.js の過負荷