Next.js と Gatsby の比較
最近 React ベースのフレームワークである Next.js と Gatsby を使っています。 ある程度客観的に比較できるだけの知識がたまったと思うので、 Next.js と Gatsby の比較情報をまとめてみました。 これからどちらを使うか・学ぶか迷っている方のご参考になれば幸いです。 あくまで私が知る範囲での説明であり 100% の正確さを保証するものではないのでその点にご留意ください。 尚、本記事は Next.js と Gatsby が以下のバージョンが最新のときに書いています。 Next.js 9.4.1 Gatsby 2.22.3 いずれも活発に開発が行われており、バージョンが進むとあてはまらなくなる記述も出てくるものと思います。 「そもそもスタティックサイトジェネレーターって何？」「 Jamstack って何？」という方には、別ブログですが次の記事がご参考になると思います
Next.js + Storybook Addon | Storybook: Frontend workshop for UI development
A no config Storybook addon that makes Next.js features just work in Storybook Storybook Addon Next ⚠️ DEPRECATED ⚠️ This addon has been deprecated in favor of @storybook/nextjs which is the Storybook official addon for supporting Next.js features in Storybook. It supports everything storybook-addon-next does and much more! I even worked on developing this with them so you should be in good hands.
はじめに フロントエンド開発を進める際に、Next.jsでのSVGでの扱い方について考える機会があったので、Zennで共有しようと思った次第です。 本来、Webサイト内でSVGファイルを表示させる方法は、大きく分けて以下3点だと思われます。 imgタグのsrcにSVGファイルへのパスを設定して読み込ませる。 CSSファイル内のbackground-imageにパスを設定して読み込ませる。 HTML内でSVGをインラインコードで埋め込む。 ※ 細かく話すとSVG以外の拡張子の画像でもインライン化できたり、CSSでもSVGをインラインで読み込ますことが可能ですが、今回は割愛させてください🙏 1と2の方法だと、他の画像ファイル同様、簡単に読み込ませることができますが、SVG内のスタイルをHTMLもしくはCSSで変更できません・・・ 3の方法だと、HTMLやCSS、JavaScriptによるスタ
Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に Vercelは同社が開発するWebアプリケーションフレームワークの最新版となる「Next.js 14.2」の正式リリースを発表しました。 Next.jsは、ReactをベースとしたオープンソースのWebアプリケーションフレームワークです。ルーティングやサーバサイドレンダリング（SSR）、静的サイト生成（SSG）など多数の機能を備えています。 Next.js 14.2では、webpack後継のRust製のビルドツール「Turbopack」がリリース候補に到達。ビルドの性能向上やキャッシュ、エラーメッセージの改善などが行われています。 Next.js 14.2 ◆ Turbopack (RC): 99.8% of tests passing for `next dev --turbo`
多言語対応している Web アプリで、あらかじめファイルに書き出しておいた画像 (アセット) が言語別にあって、それをページに埋め込むにはどうするか、という話題です。基本は言語ごとに別々の画像を出すことないと思いますが、たまーにあるんですよね。例えばGoogle Play のバッジが言語ごとに違うので、これを言語ごとに出し分けたいとか。 Google Play バッジ – Google 色々方法があるので、それをいくつか紹介します。 方法1. import 文を言語の数だけ書く シンプルにやるなら、言語の数だけ import 文を書いて、next/image の <Image> コンポーネントで読み込むコードを書くかと思います。 // pages/index.ts import Image from 'next/image'; import GooglePlayJaJP from '../
Next.js 13 結合テストに挑戦してみた
Next.js 13 新機能の App ディレクトリの勉強がてら、結合テストをどう書いていったらよいか考察しました。参照している公式ドキュメントが beta 版なのはもちろん、App ディレクトリそのものが beta 版なので、実運用には使えるものではないと思うので予めご了承ください。一応こんな感じで書けそう、という話です。 結合テストの準備 本稿が指す結合テストとは、App ディレクトリのルートセグメントを構成する、特別なファイル（Special Files）が、与えた状態に応じてどのように表示されるかを検証するテストを指します。 ルートが外部から受ける要因として大きいものが、URL に含まれるクエリパラメーター・パスパラメーターです。コンポーネントは、これらの値を参照して API サーバーにリクエストしたり、ORM ライブラリからクエリーを発行したりなど、コンポーネント表示に必要な処理
こちらは Next.js Advent Calendar 2019 17日目の記事です。 Next.jsの話をすると「ReactでSSRをするやつでしょ？」と言われます。正しくはありますが、その答えでは不十分です。 ここでNext.jsの公式サイトを見るとランディングページにはThe React Framework for Production Server-rendered App, Static Websites, the Enterprise, the Desktop, the Mobile Apps, SEO-Freiendly App, PWAs and Electronとあります。要するに、いろんな用途に使えるということです。 SSRを使用しないのであれば、「ユーザー向け（Not管理画面）なサービス開発であればCRA（create-react-app）で十分じゃない？」と思う方
Next.jsのサンプルリポジトリを眺めていたらInferGetStaticPropsTypeというものを見つけました。これを使うと、getStaticPropsでreturnされた値をもとに、Pageに渡されるPropsの型を類推してくれます。 ↓ ドキュメントはこちら これまではこんな感じで書いていた これまではPropsの型宣言を自分で書いていました。 import { GetStaticProps } from 'next'; // 👇 type Props = { posts: Post[] }; export const getStaticProps: GetStaticProps<Props> = async () => { const { posts } = await getPosts(); return { props: { posts, }, revalidate:
Build a Next.js app in Storybook with React Server Components and Mock Service Worker
🚀Update, March 12: Storybook 8 is out now!Storybook 8 (our next major release) brings React Server Component (RSC) compatibility to Storybook for the very first time, letting you build, test and document Next.js server applications in isolation. In our first demo, we used Storybook to develop a contact card RSC, which accessed contact data both asynchronously and from a file system while simulati
Next.js 14まとめ
基本的には以下のNext.js 14のブログを翻訳してまとめたものになります。 TL;DR Turbopack: App & Pagesルーター向けの5000のテストをパス ローカルサーバーの起動が53%高速化 Fast Refreshによるコードの更新が94%高速化 サーバーアクションの安定版: 進歩的に強化されたミューテーション キャッシュと再検証の統合 シンプルな関数呼び出し、またはフォームとネイティブに連動 部分的プリレンダリングのプレビュー版: 高速な初期の静的レスポンス+ストリーミングの動的コンテンツ Next.js Learnの新規追加: Appルーターや認証、データベースなどを教える無料のコース アップデート詳細 Next.jsコンパイラ Next.js 13以降、Next.jsではPagesとAppルーターの両方でローカル開発のパフォーマンスを向上させるように取り組んでき
GitHub - happykit/flags: ⛳️ Feature Flags 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
Next.jsにCSS Modulesを導入する
2020/11/30時点では、Next.jsではなんとなくCSS Modulesを推しているような空気がある。ビルトインサポートしてるし。 これまでCSS Modulesから逃げ続けてきたけど、このツイートを見て、そうだよなーーーCSS Modulesやってみるかーーーって気になってきた。 というわけでやってみる
BFCacheを利用してNext.jsで実装した無限スクロールのUX改善をした話 | PR TIMES 開発者ブログ
Next.jsに移行した初期の実装 Next.jsに移行した初期の実装ではgetServerSidePropsで検索結果の1ページ目を取得し、そのデータをTanstack Queryにhydrateするといった形で実装しました（この実装方法自体はUX改善後も変わりません）。 import { dehydrate, type DehydratedState, QueryClient, Hydrate } from '@tanstack/react-query'; export const getServerSideProps = async ({req, res, query}) => { const {search_word: searchWord} = query; const queryClient = new QueryClient(); const searchResultResp
「買ってよかったもの」サイトを Heroku (Rails) から Vercel (Next.js) に移行しました - 書いたもの
この記事は CAMPHOR- Advent Calendar 2022 の18日目の記事です。 2017年に「買ってよかったもの」というウェブサイトをリリースし運営していますが、リリースから5年経った今 PaaS 移行のため技術スタックも一新しフルスクラッチで書き直したのでその話をします。 ソースも公開しています。 github.com 「買ってよかったもの」とは Heroku 無料プラン終了に伴う移行検討 Vercel + PlanetScale への移行 新アプリの技術スタック (Next.js + Prisma + tRPC) パフォーマンスチューニング Rails vs Next.js Heroku に感謝 宣伝 「買ってよかったもの」とは 「買ってよかったもの」は Amazon で買ってよかったものを投稿・共有するサービスです。自分が投稿した商品へのリンクは自分のアフィリエイトリ
概要 最近、実務の中で Next.js version 13 の App Router で実装する機会をいただきました。 しかし、実際に使ってみたところ、SSR と React Server Components をごっちゃに解釈してしまい、よくわからないことになってしまいました。そのため、今回の記事で自分の中での SSR と React Server Components について一旦整理しよう、ということで今回の記事を作成しました。 公式のドキュメントを参照しながらまとめたため、大きな解釈違いはないと思っているのですが、間違っている箇所などあれば気軽にご指摘いただけると嬉しいです。 SSR とは まず、SSR について簡単にまとめていこうと思います。 SSR とは、Server Side Rendering の略称で、その名の通り、サーバーサイドでレンダリングすることを指します。具体的
![[Next.js] SSR と React Server Components の相違点を理解する](https://cdn-ak-scissors.b.st-hatena.com/image/square/18c54d2132380ee4bdedd3589e44754470327bd5/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--nEZdUMCc--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BNext.js%25255D%252520SSR%252520%2525E3%252581%2525A8%252520React%252520Server%252520Components%252520%2525E3%252581%2525AE%2525E7%25259B%2525B8%2525E9%252581%252595%2525E7%252582%2525B9%2525E3%252582%252592%2525E7%252590%252586%2525E8%2525A7%2525A3%2525E3%252581%252599%2525E3%252582%25258B%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252581%2525A4%2525E3%252581%2525A1%2525E3%252581%2525AE%2525E3%252581%252593%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzRjZDZjM2E1ZmQuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Next.jsの開発元Vercel、Edge FunctionsでWebAssemblyのサポートを発表 Next.jsの開発元であり、Webアプリケーションのホスティングサービスなどを提供するVercelは、CDNエッジでJavaScriptを実行できる「Vercel Edge Functions」でWebAssemblyのサポートを発表しました。 WebAssembly is now supported in Vercel Edge Functions. Code in C, Go, Rust, and more – and run it at the Edge.https://t.co/N5NKwmJ3mn — Vercel (@vercel) August 26, 2022 Vercel Edge FunctionsはCDNエッジでJavaScriptを実行し、認証用プロキシやキャ
CloudRun + Go + Next.js で画像閲覧に特化した Twitter クライアントを作ったはなし
zenn 初投稿になります、kimihiro_n です。 先日リリースした個人開発のアプリケーションのはなしをしたいと思います。 作ったもの 最初に宣伝かねて作ったものの紹介を。 イラスト投下閲覧用に Twitter を使っているのですが、公式 Twitter だとイラスト以外の投稿もたくさん混ざって追いづらかったり、最適化の影響で見逃してしまうツイートがあったりと不便さを感じていました。 Twitter API を使ってこの辺いい感じにフィルタリングしたら快適になるんじゃないかと思い Web アプリケーションとして作ってみることにしました。 自分のタイムラインやリストをフィルタリングして表示するだけのアプリケーションですが Twitter で絵師さんを追いたいみたいな用途だと便利に使えると思うので是非試してみていただければと。 後述しますが PWA(Progressive web app
プロトタイピングしたツールを、身内へ気軽に公開したくなることってありますよね。Cloudflare Accessみたいなちゃんとしたソリューションをイチから導入するほどのモチベーションはなくて、Basic 認証が付いてればまあいっか、くらいの気軽さのやつです。 近頃だと、筆者はフロントエンドプロジェクトを Vercel にデプロイすることが多いので、Vercel について調べてみました。 Vercel には、主に Next.js から使うことを前提とした、Edge Middleware という仕組みがあります。これはページの表示前に割り込む形で通信結果に介入できるので、Basic 認証を実装できそうです。 Next.js を使う場合はこれでいいのですが、目的次第ではCreate React AppやViteのような、小さめのツールチェインでプロトタイピングをしたいケースもありますよね。そう
例えばこのコードでは、PostFeedをローディングしてる最中は「Loading feed...」っていうローディングUIがまず表示され、読み込みが終わったらコンポーネントが描画される、というようなことができます。 このように、App Routerは非常に大きな可能性を秘めているのですが、これからのNext.jsの開発スタイルとかがガラッと変わるんじゃないかということで、皆さん激震が走ってるというところですね。 白石: それほどの変更だとすると、マイグレーションが必ず話題になると思うんですが、どうなるんでしょうか？ 古川: マイグレーションについてのドキュメントはあるのですが、実際に移行するのはかなり大変です。 Pages Routerも残るので、無理にApp Routerに書き換えなくてはならないというものでもない。 ただ、これから追加される新しい機能のほとんどがApp Routerベー
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 user is authenticated // But we need to check for it anyway for TypeScript. return redirect('/login'); } else if (error) { return <p>Error: An err
GitHub - hashicorp/nextjs-bundle-analysis: A github action that provides detailed bundle analysis on PRs for next.js apps
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のrewritesは気軽に使わない方が良いかも 一つでもrewrites設定が書かれているとクライアントサイド含め色々な処理が発生する rewrites設定が一つでも書かれていると、rewritesのパターンにマッチしないページであっても再レンダリングが発生することがある JSのバンドルサイズが大きくなる可能性あり（next@v11.0.2 でrewriteをひとつ記述しnext buildしたところmain.jsが約4KB増えた）
Next.js 15 RC
The Next.js 15 Release Candidate (RC) is now available. This early version allows you to test the latest features before the upcoming stable release. React: Support for the React 19 RC, React Compiler (Experimental), and hydration error improvements Caching: fetch requests, GET Route Handlers, and client navigations are no longer cached by default Partial Prerendering (Experimental): New Layout an
Next.js + TypeScript で Spotify Web Playback SDK の公式サンプルを書き直してみた
音楽配信サービス「Spotify」はデベロッパー向けに様々なAPIやSDKを公開しており、Spotify Web Playback SDKもそのうちの一つです。このSDKを利用することで、自作のWebアプリにSpotifyのストリーミングサービスを組み込むことが可能になり、Premiumプランに加入しているユーザーはWebアプリを通して音楽を再生することができるようになります。 Spotify for Developersでは、Reactで書かれたサンプルアプリの作り方をGuideで紹介しています。また、ソースコードもGitHubで公開されています。 Spotify Web Playback SDKのGuideページ 本記事では、このサンプルアプリをNext.jsとTypeScriptを用いて書き直した過程をまとめたものです。完成形のソースコードはGitHubで公開しています。 Spoti
技術構成 API: microCMS(ヘッドレスCMS) Next.js Vercel TypeScript はじめに プレビュー機能は、Next.jsのPreview Modeのおかげで、実装自体は簡単になりました。ですが、「現在どのプロセスを実行中で、どのシステムやサービスに対してどんな操作を行っているのか？」 の把握に少し時間がかかりました。 なのでこの記事では、プレビュー機能を実装する過程を分けて解説し、図解した上で今はどの過程かを示して書くようにしました。特に初めての方が迷わずに進められるように心がけました。 プレビュー機能とは？ プレビュー機能は、コンテンツの公開前に、そのコンテンツがウェブサイト上でどのように見えるかを確認できる機能です。この機能により、下書き状態や編集中の記事を、実際の公開環境と同じ条件下で閲覧することが可能となります。 プレビュー機能をどう実現しているか？
この記事は何？ これは「Next.jsのISRを独自に実装する」という記事の続編になります。 この記事では、上で紹介しきれなかった、CSRなページ・SPAなコンテンツをスタティックなページに変換して配信するということについて紹介していきます。 前提となる情報は上の記事で述べられているため、まずはそちらをご覧ください。 全体像 上の記事にでも説明されていた概要図をそのまま引用しています。 本記事で説明するのは、Cloudflare Workers以外の部分です。 ここではオリジンをNext.jsにしていますが、Create React Appで作ったようなプレーンなSPAサイトでも構いません。 Next.jsのISRを独自に構築する ~ Cloudflare Workers編（Cache APIの注意点） ~ Workerとオリジンとの間にレンダリングミドルウェアを挟むことで、事前に代理レン
Next.js 13 の SSR Streaming を AWS Lambda Response Streaming で実装する方法 | Amazon Web Services
Amazon Web Services ブログ Next.js 13 の SSR Streaming を AWS Lambda Response Streaming で実装する方法 AWS Lambda のレスポンスペイロードストリーミングを使用することで、サーバーサイドでレスポンスデータが利用可能になった時点で呼び出し元にデータを段階的に送信することができます。これにより、Web アプリケーションやモバイルアプリケーションのパフォーマンスを改善し、ユーザ体験を向上させることができます。AWS Lambda のレスポンスストリーミングに関して詳しくは Introducing AWS Lambda response streaming の記事を参照ください。 本記事では、レスポンスストリーミングの実践的な活用例として、Next.js 13 において提供されている SSR Streaming
Next.js 9.5
We are excited today to introduce Next.js 9.5, featuring: Stable Incremental Static Regeneration: re-build static pages after you've deployed, in milliseconds Customizable Base Path: easily host Next.js projects on subpaths of your domain Support for Rewrites, Redirects, and Headers: rewrite vanity URLs, redirect old URLs, and add headers to static pages Optional Trailing Slash in URLs: consistent
Next.jsのStatic Exportsを本番プロダクトで利用してみた感想と注意点 - Tabelog Tech Blog
目次 はじめに Static Exportsとは Static Exportsを採用した経緯 Static Exportsを利用する際の注意点 Dynamic Routingが使えない 対策 運用してみての感想 まとめ 最後に はじめに こんにちは。食べログ ウェブ開発部 FEチームの原田です。 昨年リリースした食べログノートではNext.jsを利用しており、Static Exportsを採用しています。 今回は食べログノートでStatic Exportsを採用した経緯や採用するための注意点、実際に運用してみての感想をお伝えします。 食べログノートの詳細については以下の記事も是非ご覧ください。 https://note.com/tabelog_frontend/n/na9a2ce24a4d5 Static Exportsとは Static Exportsとは、Next.jsのウェブアプリケ
How we optimized package imports in Next.js40% faster cold boots and 28% faster builds In the latest version of Next.js, we've made improvements to optimize package imports, improving both local dev performance and production cold starts, when using large icon or component libraries or other dependencies that re-export hundreds or thousands of modules. This post explains why this change was needed
AWSでNext.jsをSSRモードで動かす方法について、社内で相談があったので、思いつく選択肢を挙げてみました。 Next.jsのSSRモードは、基本的にNode.jsが動く環境をつくれば動くと考えて良さそうです。 AWSでの選択肢 EC2 オススメ： ★★ 選定理由： 複数プロセスを起動したいなど、コンテナでは難しい場合 ECS オススメ： ★★★ 選定理由： バックエンドのAPIなどでECSを使っているのであれば フロントエンドからRDSを使うならVPC内に立てるための選択肢としても◎ Copilot CLI で ECS を立てる オススメ： ★★ 選定理由： ECSをお手軽に立てたい 立て方の違いだけ EKS オススメ： ★★ 選定理由： バックエンドのAPIなどでEKSを使っているのであれば Node.jsの環境をつくれば動く Lightsail オススメ： ★★ 選定理由： A
はじめに Next.js Conf 2022でNext.js 13の発表がありました。BlogなかでNext.js13の新機能まとまっていたので引用。 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 (stable): Faster with native browser lazy loading. New @next/font (beta): Automatic self-hosted fonts with zero layout shift. Improved next/lin
GitHub - ixkaito/nextsss: Next.js static site starter including full setup for TypeScript, Tailwind CSS, Google Analytics, Next SEO, etc.
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 アドベンドカレンダー 2020の 24 日目かつ Japan Digital Design アドベントカレンダーの 24 日目です。 Next.js をデプロイする上で、 Vercel 以外のインフラを選択する際、どのような要件が必要かを以下に整理します。 SSG/SSR/ISR のどれを選択するべきかというのはアプリケーション性質に大きく依存しますが、インフラ要件も大きな要素であるため、慎重に選択するのが良いかと思います。 SSG の場合 要件 Static Site の配信ができれば十分です。 デプロイ時のビルド環境として CI を使う他、 GitHub の push を hook してビルドが走るサービスを使用するのも良いでしょう。 SSG に比べ、 そこそこ大きな静的リソースを配信するため、 CDN を経由するのがベターです。CDN の選定の場合は対象と
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
先日Vercelから「Next.js App Router Caching: Explained!」というタイトルの動画が公開されていたので、その内容をまとめることでNext.jsのキャッシュの今について整理しておこうと思います。 基本 まずNext.jsでは、静的レンダリングがデフォルトです。RSCを使用していても基本的にはビルド時にページが事前レンダリングされます。これはRoute Handlersも同様です。仮にビルド後にデータを更新してもリビルドしない限り表示は古いままであり、これは静的にレンダリングされていると言えます。 ただし、developmentとproductionでは挙動が異なります。ローカルではコードに変更を加えるたびにデータが再取得・レンダリングされるので、ローカルとビルド後の挙動に違いがあることを理解しておきましょう。 リクエストするたびに最新のデータを取得し表示
Next.js App Router 遷移の仕組みと実装
Next.jsのv13.4が発表され、App RouterがStableになりました。App Routerは発表以来着実に実装が進んでおり、最近もServer ActionやParallel Routesなどの新機能が次々と発表されています。 当然ながらこれらの話題はフレームワーク利用者目線の話題が多いのですが、本稿はApp Routerがどう実装されているのか、筆者の興味のままに遷移処理周りを中心に調査したまとめ記事になります。知っておくと役に立つ点もあるかと思うので、参考になれば幸いです。 Next.jsの遷移とprefetch挙動 Next.jsの遷移を理解するには、まずprefetch挙動について知る必要があります。今回は調査用のデモとして、pagesとappそれぞれで同じようなページをいくつか用意しました。 pagesで実装したページ appで実装したページ これらで従来のpag
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 Supabaseとは、firebaseの大替サービスとも言われるBaasです。データベースにRDBを採用しているのが特徴です。 Next.js v13を学んでいる時に以下の記事を見つけました。Next.jsプロジェクトから、Supabaseのデータ取得を行っており、わかりやすかったです。 Next.js v13のインプットにも、Supabaseの入門にも役に立つチュートリアルだと思います。 今回は、こちらの記事を元にNext.js v13の機能を、v12と比較したりしながら試してみました。 Supabase側の設定 Supabaseにログインし、新しいプロジェクトを作成します。 左サイドバーから[SQL Editor]に移動し、以下のコードをエディタに貼り付けます。右下の[RUN]ボタンから、クエリを実行します
catnose on Twitter: "フルスタックNext.jsアプリケーション on Cloudflare を断念した（n度目）"
フルスタックNext.jsアプリケーション on Cloudflare を断念した（n度目）
以下、公式ドキュメントより引用 When you deploy a new Next.js app with Amplify, by default Amplify uses the most recent supported version of Next.js. Currently, Amplify supports Next.js version 11. Amplify で新しい Next.js アプリをデプロイした場合、デフォルトでは、サポートされている最新の Next.js のバージョンを使用します。現在、Amplify は Next.js のバージョン 11 をサポートしています。 これまで Amplify は Next.js 9 系までのサポートだったのですが、この度バージョン 11 までのサポートとなったようです。 ISR 対応 Amplify currently supp
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsにおけるSVGファイルの表示方法を考える
Next.js 14.2正式リリース、webpack後継ビルドツールのTurbopackがリリース候補版に
Next.js で言語ごとに異なるアセット画像を埋め込む - mizdra's blog
なぜNext.jsを採用するのか？ - mottox2 blog
Next.js の InferGetStaticPropsType が便利
[Next.js] SSR と React Server Components の相違点を理解する
Next.jsの開発元Vercel、Edge FunctionsでWebAssemblyのサポートを発表
VercelのMiddlewareを使って非Next.jsプロジェクトにBasic認証をかける
古川陽介に聞く！フロントエンド最前線#4 ー Next.js v13.4 / Lighthouse User Flows
Layout.tsxはミドルウェア的に使ってもいいの？（Next.js 14）
Next.jsでrewritesを使うと全く関係ないページで再レンダリングが発生する
Next.jsのPreview Modeを使ってmicroCMSのプレビュー機能を実装してみた
Next.jsのISRを独自に実装する ~ レンダリングミドルウェアによるCSR/SPAサイトの高速化編 ~
How we optimized package imports in Next.js – Vercel
AWSでNext.jsをSSRモードで動かしたい場合の選択肢 - Qiita
Next.js 13 を試してみた | DevelopersIO
Next.js のインフラ要件と選択肢 - blog.euxn.me
Next.js App Router キャッシュの今
Next.js v13をSupabaseのデータフェッチと一緒に理解する | DevelopersIO
AmplifyでNext.js11系がサポート対象となりました