Next.jsが出てこないReact Server Componentsハンズオン
React Server Componentsを触ってみたログを本にまとめました。
React Server Componentsを触ってみたログを本にまとめました。
Next.js + Prisma + NextAuth.js + React Queryを試した - $shibayu36->blog;
2分コーディングの一環でNext.js + Prisma + NextAuth.js + React Query で作るフルスタックアプリケーションの新時代をやった。とにかく簡単に認証 + DBアクセスがあるアプリケーションを作ってvercelにデプロイできるサンプルが出来て非常に良かった。趣味プロダクトをちょっと作ってみるのに良さそう。 shibayu36/next-prisma-auth-tutorialに試した例を置いているので参考にどうぞ。 やれたこと Googleのアカウントを使ってサインインし、TODOを追加できるアプリケーション herokuのPostgreSQL dbをデータソースとして動くアプリケーションをvercelにデプロイ 作業メモ prisma、migrationのツールも入ってるし便利すぎる。 migrationしたけどpsqlでdocker内にアクセスできなか
Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感 | MEDLEY Developer Portal
2024-07-23Next.js と Server-side Rendering をプロダクト環境で3年運用してきた知見と率直な所感こんにちは、医療プラットフォーム本部・プロダクト開発室・第1開発グループ所属の加藤です。 オンライン診療・オンライン服薬指導アプリ「CLINICS」の開発を担当しています。 今回は CLINICS で採用している Next.js と Server-side Rendering (SSR) についてお話ししたいと思います。 Next.js は昨今注目を集めている React ベースの Web フレームワークです。 これから Web フロントエンドの開発を始めるにあたって採用を検討している方も多いのではないでしょうか。 Next.js といえば React コンポーネントをサーバー上で実行して HTML を返す SSR に対応しているのが大きな特徴です。 SSR
はじめに KODANSHAtechという会社でFRIDAYの開発案件に携わっています。 FRIDAYは講談社から発行されている写真週刊誌です。スクープ記事が注目されがちですがグラビアも多くやっており、撮影時の動画をウェブで提供しています。本記事では、FRIDAYにおける動画特典ページをNext.js ＋ Vercelでリプレースした事例を紹介します。 上記の画像はユーザーが動画を見るまでのフローを示したものです。ユーザーはFRIDAY紙面に掲載されたQRコードを読み込み、遷移先のページでパスワードを入力します。入力すると、動画を視聴できるようになります。 移行の経緯・技術選定 FRIDAYには古くから存在する月額課金のサービスが存在し、そのサービスに相乗りする形で紙面の動画特典ページを運用していました。しかし、サブスクリプションのサービスにリプレースしたタイミングで、動画特典ページを別アプ
Next.js 9
After 70 canary releases we are pleased to introduce Next.js 9, featuring: Built-in Zero-Config TypeScript Support: Build your application with increased confidence, thanks to automatic TypeScript support and integrated type-checking. File system-Based Dynamic Routing: Express complex application routing requirements through the file system without the need for a custom server. Automatic Static Op
2018年11月13日、DMM.comが主催するイベント「DMM meetup」が開催されました。今回のテーマは「【LIG・エアークローゼット・DMM】3社のフロントエンド開発最新事情」。規模や業務内容が異なるWebサービスを提供する3社が一堂に会して、プレゼンテーションとパネルディスカッションを通して、お互いの知見を共有しました。プレゼンテーション「DMMのサービスを支える最近のフロントエンド技術 ~ next.js の実践利用」に登場したのは。合同会社DMM.com、Webエンジニアの千葉弘太郎氏。DMMの現在の技術スタックから、新たに採用した技術の選定理由を解説します。 DMMのサービスを支える最近のフロントエンド技術 千葉弘太郎氏（以下、千葉）：こんばんは。長丁場になりますが、最後までお付き合いください。DMMからは「DMMのサービスを支える最近のフロントエンド技術」という
「エンジニアDB」というサービスを開発しました！【Next.js / Rails / AWS / Terraform / Docker / GitHub Actions】 - Qiita
3.インフラ（全体構成）について ここから技術的なことについて話していきます。 まず大前提として、プロジェクトの全体構成は、Happiness Chain の卒業課題の条件に基づいて決めれらていました。これらの条件には以下が含まれます Rails APIモード / Reactで完全SPAのポートフォリオを作る。 本番環境と開発環境にDockerを使う。 本番環境にはECS Fargateを使う。 GitHub Actionsを使ってAWSに自動デプロイする。 Terraformでインフラをコード化する。 なので、これに倣って実装しています。 アーキテクチャの全体像 フロントエンドはVercelにデプロイして、バックエンドはAWSのECSにデプロイしています。 ブランチ運用は、GitHub flowを採用しています。 プルリク時にテストが走り、mainブランチにマージされるとデプロイされる感
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、Eコマースほか - Qiita
Next.js 10 リリースノート全訳！ 画像の自動最適化、i18n対応、アナリティクス、EコマースほかNext.js この記事は Next.js 10 リリースノートの日本語訳です。 10/27、Next.js 10 がリリースされました！ 私はふだん Next.js で個人開発を行ったりしている者です。 Twitter もやっているのでよかったらフォローおねがいします！ @_thesugar_ よかったら Next.js チュートリアル（公式）の翻訳記事もどうぞ。 また、非公式ですが Next.js のドキュメントの翻訳プロジェクト も盛り上がっています！ Next.js 10 の機能をご紹介します: ビルトインの画像コンポーネントと画像の自動最適化: 新しい next/image コンポーネントを使用することで、自動的に画像を最適化します 国際化に対応したルーティング: ビルトイン
風船屋さんを支える技術。200時間でゼロからweb検索システムを構築した裏側のすべて。(Next.js, Firebase...)
はじめに こんにちは、フロントエンドエンジニアの多田です。 フロントエンド領域の勉強をはじめて 1 年が経ち、今回個人でゼロからアニプラさん(バルーンショップを経営してる会社)のバルーンサイトの検索システムを作らせていただく機会に恵まれました。 開発にかけられる総時間が 200 時間(つまり工数 1 人月ちょいぐらい、、)というだいぶヤバめなチャレンジングな時間的制約の中、要件定義・デザイン・フロントエンド・バックエンド・インフラ周りまで通して全て 1 人で開発し、完成させることができました。 はじめてfigmaでデザインしてみた アニプラさんより記事を書く許可をいただいたので、開発の裏側の話を記事にまとめます。 開発したサイトはこちら ↓ (今回の記事のメインとなる Next.js で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →
Relayで見るNext.jsとSSGの未来
現在自分が取り組んでいるプロジェクトでは、Next.jsとRelay Modernを採用して開発を進めています。 RelayはFacebookが開発しているGraphQLクライアントライブラリです。 Next.jsの9.3で導入されたgetStaticProps, および9.4で導入されたIncremental Static Regenerationは、Relayと非常に相性がいい、ということを説明します。 Example公式のexampleがすでにあるので見てください。 https://github.com/vercel/next.js/tree/canary/examples/with-relay-modern 以下が典型的なpagesの構成です。 pages/index.js
Next.js 13が発表されましたね！ この記事ではNext.jsの開発方法が大きく変わるポイントとなる以下の3つの新機能について取り上げます。 Layouts React Server Components Streaming それではさっそく試していくことにしましょう！ インストール ウェブアプリの雛形は以下で作成できます。
Next.jsにSentryを導入した際の課題と解決策について｜食べログ フロントエンドエンジニアブログ
はじめまして、2021年11月に食べログFE(フロントエンド)チームにジョインした遠藤です。 Next.jsを採用した新規プロジェクトに参画し、Sentryの導入を行いました。本記事ではSentryを導入した際の課題と解決策について記載していきます。 1. はじめに「Sentryとは何か？」、「食べログでSentryを選定した理由」などにご興味がある方はまず下記の記事を読んでみてください。 Sentryは便利ですが以前はアプリケーションに導入するにはいくつかのファイルを作成して、エラーやパフォーマンスをトラッキングするのに様々な設定を行う必要がありました。 そこでSentryが簡単にセットアップができるように@sentry/nextjsでwizardを提供してくれています。 wizardはコマンドを実行するだけでSentryに必要なファイルを自動で生成し、設定までしてくれる便利な代物です。
Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ - WebGL 総本山
top 2022 年 03 月 Next.js と React-Three-Fiber で構築されたウェブベースのメタバースの形を模索する Sougen がすごい！ 将来的には VR モードにも対応を予定 今回ご紹介するのは、ウェブを中心に据えたメタバースの形を模索するプロジェクト、Sougen のウェブサイトです。 こちらのプロジェクト、日本に拠点がある Utsubo Co., Ltd（@utsuboco）が手掛けているものらしく、かなり本格的で多くの構想を持ったプロジェクトみたいです。 現在公開されているホワイトペーパーを見ているだけでもそのあたりいろいろとうかがい知ることができるのですが、現状すでに WebGL を利用した三次元空間のバーチャルスペースが用意されており、アクセスしているユーザーをリアルタイムに処理しているようです。 リンク： Sougen 説明セクションと 3D コン
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP（Accelerated Mobile Pages）である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。 React×Next.js×AMP――この組み合わせを採用した背景 「ホットペッパービューテ
なぜLiteFS+SQLiteか 「個人開発のコストはDB次第」でサーバーレス環境でコンピューティングリソースを節約できたけどマネージドDBはまだ高いよ(要約)ということを言っていたら「本番環境でSQLiteを使うといいよ」と何人かの人に教えてもらってLitestreamのことを知った。 LitestreamはDBを読み書きするプロセスを1つにして利用するので、サーバーレス環境でsqliteファイルをパスで参照できて、複数箇所から掴まないように構築すれば条件は整えることができる(Cloud Runのように並行に呼び出してもインスタンスが共有されるサービス+最大サイズを1にしておく、とか)。 Litestreamのみでも便利に使えていたんだけど、プロジェクトをウォッチしていたらその後サーバーを複数台にしてそれぞれのインスタンスで同じ結果を得られたり、書き込み先を適切にハンドリングするデザイン
Next.js の Zod 活用術
本年は Next.js + バリデーションライブラリの Zod をよく利用し、Zenn でもいくつかの関連記事を投稿しました。本稿では、この組み合わせならではの TIPS を紹介します。記事で紹介するサンプルは以下に置いています。 リクエスト検証に便利な Zod Next.js で getServerSideProps を使用すると、リクエスト検証をサーバーサイドで行えます。例えばセッションに保持している値の検証はバリデーションライブラリの Zod を使用して、次のようなコードで実現できます。 export const userSchema = z.object({ name: z.string(), email: z.string(), }); export const getServerSideProps = async (ctx) => { const sess = await ge
Next.jsとFirebaseを使って質問箱のようなサービスを作ってデプロイするまでを解説します。
Next.js（SG） + SWR + Recoil + TypeScript でAPIグルメ検索（自動更新機能付き）
私はこうして文章を書いていますが、去年書いた文章はすべて不満であり、いま書いている文章も、また来年見れば不満でありましょう。それが進歩の証拠だと思うなら楽天的な話であって、不満のうちに停滞し、不満のうちに退歩することもあるのは、自分の顔が見えない人間の宿命でもあります。自分の文章の好みもさまざまに変化して行きますが、かならずしも悪い好みから良い好みに変化してゆくとも言いきれません。それでもなおかつ現在の自分自身にとって一番納得のゆく文章を書くことが大切なのであります。 ―― 三島由紀夫『文章読本-新装版』 (中公文庫) p.195 制作したもの。 API を用い、グルメ検索ページを作ります。 使用する API は、リクルート社のホットペッパーグルメ グルメサーチ API です[1]。 主な技術構成は、 Next.js / Static Generation SWR[2] Recoil Ty
更新履歴 Next.js公式examples集を分類（2023年7月版） Next.js公式examples集を分類（2022年7月版） Next.js公式examples集を分類（2021年7月版） Next.js公式examples集を分類（2021年1月版） Next.js公式examples集を分類（2020年7月版） はじめに Next.jsの公式サンプルは前回(2020年7月版)から34本増えて合計268本あります。新たに追加されたサンプルには(new)がついています。（2021/01/10） しかし、このままではどれを見たらいいのかわからないので主観で分類してみました。 （基礎）Next.jsで基礎的な内容を扱っているサンプル。 （公式）公式ドキュメント で説明するのに使われているサンプル等。 ※今回の更新で一番目についたのはwith-mysqlで、その他DB関連も多く追加さ
Next.jsアプリをLambda@Edgeで超簡単にSSRできるserverless-next.jsのご紹介 - Qiita
Next.js をSSR対応でホスティングしたいなら Vercel(旧Now) を使うのが定石だと思います。 Next.jsとVercelはどちらも Vercel社 (旧ZEIT社) が開発しているため一緒に使った際のDXは大変良いものです。 しかし、AWS内で完結できるならそうした方が嬉しい事が多いのでいい方法はないかと調べた所、 serverless-next.jsというServerless Componentのプラグインがよさそうだったのでご紹介したいと思います。 以下のドキュメントの要点をまとめつつ、掘り下げたものです。 https://github.com/danielcondemarin/serverless-next.js/ https://serverless.com/blog/serverless-nextjs/ serveless-next.js 機能と特徴 SSRをL
Next.js 2.0 – Vercel
More than 3.1 million developers read our announcement post of Next.js. More than 110 contributors have submitted patches, examples or improved our documentation. Over 10,000 developers have starred us on GitHub. Today, we are proud to introduce Next 2.0 to the world. What follows is a quick summary of every new feature and improvement we have made. React Made Easy and SimpleNext.js is a very slim
※ この記事は2021年6月21日に行われた「進化するフロントエンド2021 − 4プロダクトから学ぶSPA/PWAの技術と実践−」の登壇を文字起こししたものになります noteのフロントエンドの歴史 ではまず自己紹介をさせていただきます。フロントエンドエンジニアの山形と申します。よろしくお願いします。 去年の3月に入社したので、noteには1年3ヶ月くらいいます。趣味でコーヒーの焙煎とかやっています。 今回はnoteが抱えているフロントエンドの課題をどう解決していったのかを話していきたいと思います。 最初にnoteが今までどうやって実装されていたのか、その歴史を説明していきます。 初期のnoteはRuby on Railsのアセット上に構築されたSPAサイトで、フロントはAngularJSとCoffeeScriptで書かれていました。 この構成はかなりの問題を含んでいました。 1つ目はS
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
Layer0というJamstackプラットフォームを試してみた記事です。 Jamstackプラットフォームが何かは表現しにくいですが、Netlify、Vercel、Cloudflare PagesみたいなSPAなアプリケーションとかをホスティングしてくれるサービスです。 Cloudflare Pages・Vercel ・Netlify の違いや使い分けをまとめる Layer0はMoovweb XDNという名前のプロダクトでしたが、2021年4月にLayer0へリブランディングしています。 Moovweb is officially Layer0! 📝 XDN = Experience Delivery Network Layer0は、Netlify、Vercel、Cloudflare PagesのようにSPAアプリケーションをホスティングできるプラットフォームです。 他のプラットフォーム
「Developers Meetup 急成長ベンチャーが向き合う『開発生産性』」は、開発組織や事業フェーズの異なる株式会社Another works・株式会社SmartHR・株式会社スタメンの3社が、開発生産性について語り尽くすイベントです。ここで株式会社スタメンのかみお氏が登壇。フロントエンドのリプレイス前にあった課題と、「生産性が向上した」と感じさせてくれた5つのことについて紹介します。 かみお氏の自己紹介 かみお氏：「レガシーフロントエンドをリプレイスしたら開発生産性が向上しました」というタイトルでお話をします。よろしくお願いします。 まず自己紹介を簡単にさせてください。2021年1月にスタメンに入社して、主にフロントエンドを担当している「かみお」です。現在は、今回お話しするNext.jsへのリプレイスのプロジェクトに参加中です。今回初登壇なのでお手柔らかにお願いします。 今日は、リ
はじめに Next.jsなどReactのプロジェクトにはlinterとformatterが必須でeslintとpretteirを使うと思います。 しかし、導入するとなると考慮すべき点や面倒な点が結構あります。 以下は一例です。 eslintとprettierは設定が複数あり、プラグインのインストールが必要 eslint-plugin-prettierを使えば、pretteirがなくてもformatterは実現できるため、そもそもprettierいるのか問題 逆にeslintはlinterとしての役割のみにして、formatterの機能は持たせたくない そこででてくるのがBiomeです。 Biomeとは 一言でいうとeslintとprettierを一つにしたものです。 以下、公式の引用とページです。 Biome はWebプロジェクトのための高性能なツールチェーンであり、プロジェクトの健全性を
サーバ・クライアント間の通信を gRPC で行う場合、インターフェイスを定義した共通のファイルから、サーバとクライアント双方のコードを生成することができる。 この記事では、インターフェイスの定義ファイルを作成するところから始めて、gRPC を利用した単純なウェブアプリを作っていく。 gRPC についての概念的な説明などは扱わず、実際に手元で動くウェブアプリを作ることで、gRPC を使った開発についてイメージしやすくなることを意図している。 Next.js では API Routes を使って API サーバを作ることができるが、それを gRPC クライアントとして実装する。 そのため、リクエストの流れは以下のようになる。 Frontend == (REST) ==> API Routes == (gRPC) ==> gRPC Server 動作確認は Node.js のv16.13.2で行
Qiita TypeScript Advent Calendar 2020 最終日の記事です。 TypeScript製の内部リンク取得ライブラリ「pathpida」 最近ちょっと話題になった frourio と aspida を開発したSolufaです。 Zenn初投稿を記念して、新作ライブラリ「pathpida」を紹介します。 と言っても完全な新作ではなく、初回リリースからもうすぐ1年が経ち月間DL数は1,000を超えています。自分が関わる案件だけで静かに検証を続け、ようやっと今週全面リニューアルして一般告知が出来るようになりました！ pathpidaはNext.jsとNuxt.jsそれぞれのルーティング規約に最適化しているので設定不要で型安全に使うことが出来ます。 どんな問題を解決するのか 以下のように/post/1 に遷移するLinkがあるとします。 import Link from
最近Next.jsのドキュメントが更新されて、APIリファレンスが付くなど読みやすくなったので、この機会に全部読んでみた。メモを置いておく。 https://nextjs.org/docs/routing/introduction#dynamic-route-segments pages/post/[…all] → /post/* (/post/2020/id/title) こんなことできるのか！ただ全部吸い込まれるのは使いづらそう https://nextjs.org/docs/routing/shallow-routing router.pushにshallowオプションを加えると、getInitialPropsを実行しないレンダリングができる。ページ内でクエリやハッシュフラグメントを変えるなどで便利に使えそう import { useEffect } from 'react' imp
Next.js でテスト駆動開発を進める時に必ず関門となる各種機能のモックに関するベストプラクティスを紹介します。 今回は Router などの機能をモックした render を作成して、共通のコンポーネントとして利用することを目標としましょう。 バージョン情報 Node.js：15.11.0 React：17.0.2 Next.js：10.2.2 Jest：26.6.3 React Testing Library @testing-library/react：11.2.5 Router を使用した際の問題点 next/router
Next.js 13 から新たに App Router と呼ばれる機能が追加されました。これは従来の pages ディレクトリとは異なるレイアウトシステムです。App Router には以下のような特徴があります。 ルーティング：pages ディレクトリではページのルーティングはファイル名によって決まっていました。例えば pages/about.js というファイルは /about というパスに対応します。App Router ではルーティングに対応するファイルは page.js という固定の名前になります。/about というパスに対応するファイルは app/about/page.js という名前になるのです。page.js 以外にも共通されたレイアウトを担当する layout.js、ローディング UI を表示する loading.js などさまざまな特殊なファイルが存在します。 レンダ
はじめに 2か月前に「SWRを使おうぜという話」という記事を書きました。 Vercel謹製のSWRの便利さや導入の簡単さについて語りました。 そしてそれに感動を覚えたらとにかく使いたくなります。 だって既存のプロジェクトに導入するのも簡単だから（！） Firestore サーバーレスでのアプリケーションやデータをほとんど持たないwebサイトを作成するときは、私はfirebaseのFirestore(GCP)をよく利用します。 これもまたSWRなどと同じくとても簡単に導入できるので、各方面に推奨しております。 しかしFirestoreでの辛い点は、データの取得や更新に必要な手数の多さです。 通常の記載は下記。（※Typescriptを使用しております。） 投稿一つ型チェックするのにこのコーディング量！ type Categories = "ブログ" | "ニュース"; type Post =
AWS Amplify ConsoleでNext.jsのプロジェクトをデプロイすると Serverless Next.js Component のインテグレーションによってAWS Lambda リソースが最大4つ作成される(ソースコードはエクスポートできる) Default Lambda@Edge for Next CloudFront distribution API Lambda@Edge for Next CloudFront distribution Image Lambda@Edge for Next CloudFront distribution Next.js Regeneration Lambda それぞれのAWS Lambdaが行っていることを読み解くとVercelが自社で構成しているシステムの外観が分かるのではないかと思って眺めてみた (CloudFrontのコンソール
弊社ニジボックスでは、9/8（水）にNext.jsの1日研修を実施しました。WEB+DB PRESS Vol.123でNext.jsの特集記事を執筆した古川陽介さんと吉井健文さんの2名を講師に迎え、参加者は30名以上にもなりました。 この研修の企画運営と事前のフォローアップ研修で講師を担当させていただきましたので、研修のねらいや当日の雰囲気をご紹介します。 なぜNext.js研修なのかReactに関しては世間的にも広く使われ始めており、これまでもニジボックス内の研修テーマとして度々扱って来ました。Next.jsはそのReactを包含しているフレームワークです。 今回、Reactの枠を超えたNext.js研修を行ったのにはいくつかの理由があります。 まず１つ目は、フレームワークとしての使い勝手が非常に良いからという単純な理由です。React、TypeScriptといったモダンな開発環境をコマ
TL;DR スマホでQRコードを読み込むプロフィール交換アプリを開発した。 イベントソーシングだったり Hono だったり、気になる技術を試せた。 アプリのレスポンスが速く、懇親会も盛り上がったのでよかった！ はじめに レバテック開発部で基盤システムグループに所属している瀬尾です。 普段はマイクロサービスのつらみを味わったりしています。 昨年末に弊社で大規模な懇親会があり、そこでの交流を増やす目的として、互いの QR コードを読み取りプロフィールを交換するアプリを作りました。 この記事では、そのアプリをどんな技術でどのように開発していったかをご紹介しようと思います！ 技術スタック 言語 Typescript Go（Lambdaで使用） フロントエンド Node.js Next.js, TailwindCSS バックエンド Bun Hono, Prisma イベントソーシング インフラ AW
Next.js と MSW 高階関数
本稿では Next.js アプリ設計と同時に検討しておきたい、API Mocking の設計（MSW の活用テクニック）を紹介していきます。※ 解説のなかで jest を使いますが、ここは特別こだわりがあるわけではありません。 MSW で表現する API 群 MSW は Next.js アプリのローカル開発に役立ちます。任意の API を任意のレイヤーで、個別にインターセプト可能です。 「ブラウザー → API Routes」間でインターセプト 「API Routes → API 群」間でインターセプト 「getServerSideProps → API 群」間でインターセプト また、自動テストに利用でき、フロントエンドの単体・結合テストが書きやすくなります。同一プロセスでサーバーレスポンスをモックするため、外部プロセスに依存しない、高速な自動テストを回すことができます。 MSW 高階関数
RubyKaigi2022スケジュールアプリ、フロントをNext.jsに移行してみてわかったこと - SmartHR Tech Blog
こんにちは、開発者のkinoppydです。こんにちは。 SmartHRでは、去年から引き続きRubyKaigiにスケジュールアプリを提供しています。事前にRubyKaigiスケジュールから「拙者のセットリスト」を作成してもらい、SNSで他の参加者とシェアして楽しんでもらうことを目的にしています。 これが今年のワイのセトリや！https://t.co/vZ3nGrPlCt #rubykaigi— kinoppyd (@GhostBrain) 2022年9月1日 去年のソースコードを利用しつつ、今年は新しいチャレンジとしてフロントの環境をNext.jsに移行してみようと考えました。去年の時点で、フロントはほぼReactで書かれており、helperという名の実質APIも書かれていたので、そんなに大きな手間にはならないだろうと思いましたが、とはいえ色々と起こったのでその様子をお伝えしたいと思います
next.js の AMP mode を使って静的サイトを作る
この記事は amdxg を作りながら, next.js で AMP に対応したときにやったことです。 コードはこちらです amdx/packages/ssg at master · mizchi/amdx AMP について Google の推奨する HTML のサブセット仕様です。制約付きのインライン CSS のみ + 一切の JS が書けず、代わりに動きがあるものは amp plugin を使って記述します。 モバイルでは、Google の検索結果画面からは GoogleCDN 上のキャッシュが返却されるので、非常に高速に開くことができます。 (⚡ マークが AMP 対応の印) モバイルに限らず、ある種のベストプラクティスの強制なので、PC でも AMP 対応することに意味はあります。 この記事では、実際にこのブログのための SSG を作る過程で、どのように next.js 上で AMP
Testing with Next.js
先日、Next.js におけるテスト手法について、公式ドキュメントが追加され話題になりました。 取り上げられている 2 者はよく知られており、いずれかに触れたことがある方も多いかと思います。この公式ドキュメントページでは「何を使って」を紹介しているのみなので、どちらを選ぶべきか悩んだ方もいるのではないでしょうか？ Cypress Jest & React Testing Library この判断についてはドキュメントに書かれていなかったので、筆者なりの見解を紹介していきたいと思います。 お勧めは「Jest & React Testing Library に寄せる」 Cypress は GUI が素晴らしく、テストを書く環境としてはとても体験が良いです。しかしテストが増えていくにつれ、以下のような点で DX 低下を招くことがあります。 CI の実行コストが高く、実行時間が長い cypress
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
週刊誌の動画特典ページをNext.js + Vercelで構築した話
なぜNext.jsを選んだのか？ DMMのサービスを支えるフロントエンド技術の今
Next.js 13で開発方法はどう変わる？
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み
快適なUXの裏には泥臭さがあった？ 新サービス開発に「React×Next.js×AMP」採用のワケ
LiteFS+SQLiteでフルスタックNext.jsアプリケーションを作る
Next.jsとFirebaseで質問箱のようなサービスを作る
Next.js公式examples集を分類（2021年1月版） - Qiita
Next.js + SvelteによるnoteのフロントエンドApp分割｜note株式会社
GitHub - vercel/next.js: The React Framework
JamstackプラットフォームのLayer0へNext.jsのアプリをデプロイしながら試す
レガシーフロントエンドをNext.jsにリプレイス 「開発生産性の向上」を感じさせてくれた5つのこと
【Next.js】eslint + pretteirをやめてBiomeにした話
Next.js で始める gRPC 通信 - 30歳からのプログラミング
設定0行でNext.jsとNuxt.jsの内部リンクを型安全に取得できる最強ライブラリ「pathpida」
Next.jsのドキュメントを全部読んでみた - $shibayu36->blog;
Next.js の Jest / React Testing Library でモック (mock) を含めた render で開発効率を高めよう | fwywd（フュード）powered by キカガク
Next.js 13 app directory で記事投稿サイトを作ってみよう
SWRで爆死を避ける。firebase Cloud FirestoreとNext.js。
Serverless Next.js Component のISR実装を読み解く
Next.js研修を実施 ~ 深い理解の上でモダンフロントエンドに携わる ~ | フロントエンドエンジニア
Next.js + Hono + AWS でイベント駆動なプロフィール交換アプリを開発！