Next.jsでv12〜middlewareという機能が使えるようになりました。 middlewareに書いた処理はリクエストが完了する前に実行されます。Cookieの値に応じてルーティングを振り分けたり、Basic認証を導入したり等など、幅広い用途で使えそうです。 VercelとNext.jsの組み合わせが強いのは、VercelにNext.jsをデプロイするとこのmiddleware部分をEdge Functionsで捌いてくれるという点です。つまり、静的なページに対するリクエストに対して、オリジンサーバーに触れことなくmiddlewareを実行できるということです。 Vercel以外のプラットフォームだとどうなのか ドキュメントには以下のような記載があります。 This works out of the box using next start, as well as on Edge
本記事ではNext.js+TypeScript+AWS Amplify+Recoilを使って、モダンなToDoリストを作る方法を紹介します。 Githubリポジトリを公開しますので、不具合や不適切な実装を見つけた場合はドシドシIssueかPull-Requestいただけると幸いです。 背景 私自身普段はRuby on Railsを使って開発しています。JavaScriptは正直まだ苦手です。 Railsは爆速でアプリを開発出来る点が魅力的ですが、一方でモバイルアプリとの連携やリッチなUIが求められる案件では、フロントエンドとバックエンドを分離した構成にせざるをえないケースがあります。 そのような構成だと、かえってRailsがリッチ過ぎるとも感じており、AWS Amplifyのようにバックエンドをスピーディーに構築してくれるサービスを一度使ってみたいと思っていました。 そのため、Next.j
Next.js App Router Training Introducing various basic patterns using Next.js' app router with simplified code. ディレクトリ作って、コード書いたら新しいサンプル追加できるので、追加ウェルカムです！ 目的 自分の検証サンドボックスがほしかった 公式ドキュメント含め、解説と参考コードはあるが、実際に動いている状態とコードを同時に見たい 簡潔な短いコードで早く理解を促したい 一番の目的は、初学者にApp Routerの機能を説明するときにこのサイトである程度、網羅されており実行されているコードとその状態が見えるものが欲しかったというのが主な理由です。 逆にあまり説明は書きたくなく、それは公式ドキュメントや他の方のブログで説明されているのでそちらを読んでもらいたいです。 知見 / 感想 仕
動機と目的 普段、Next.jsでアプリケーションを開発しています。当初は Next.js にも TypeScript にも慣れていなかったため、ページのパスを定数で定義し、Link コンポーネントで呼び出していました。 // constants/path.ts export const TOP_PATH = '/' export const USERS_PATH = '/users' // ...
Next.jsで整える。デザインとロジックの分離
先日開催されたジャムジャムJamstackで登壇させていただいた時の記事になります。 簡易構成のリポジトリを作成しましたので、参考になればと思います。 経緯 メディアサイトを作成することになった デザイナーコーダー ×1 フロントエンドエンジニア ×1（ワイ） Next.jsとmicroCMSでSSGしてvercelにデプロイ 私的、Jamstack王道構成ですね デザイナーコーダーさん「Jsわからんです」「抵抗感あります」 SSGをする為のpages/配下のファイルにはいろんな処理が記載されます。 getStaticPropsやgetStaticPathsとか ページネーションとかパンクズとか作る為の処理が色々記述されます。 この辺なんらかの方法で・いい感じに・分離できたら・いいですね^^ デザイナーコーダーが触るViewの部分 フロントエンドが触るロジックの部分 これを目指していきます
Next.jsにするか他のフレームワークにするか迷っている人はNext.jsを選べばいい | フューチャー技術ブログ
タイトルで言いたいことは言ってしまっているのですが、2017年ぐらいからNext.jsを使ってきて、最新の情報のキャッチアップとかもそんなに苦労はなくて、こだわりがないならNext.jsでいいのでは？という記事です。 Next.jsは大きすぎる？フレームワークが大きいのはたいていそうで、提供されているすべての機能を使うわけではなく、その一部だけを使います。そのサブセット自体がシンプルであればフレームワークはどれだけ大きくても問題はないはずです。JavaとかPythonとかGoのコード書いてもごく一部のライブラリしか使わないわけで、でもそれに対して「ライブラリがでかすぎる」とは言わないですよね。 Next.jsは「より高速にする」機能がたくさんありますが、別にそんなの最初から使う必要はないですし、サービスによってはそもそもその機能が合わない、というのもあります。ユーザープロフィール画面にIS
Next.jsのPage Extensionsを活用してビューとロジックをを分離したプロジェクト運用について考えた事まとめです。
app router とは next.js で使用できるファイルシステムベースのルーターです。以前は pages router というものがありましたが、そちらの進化系といえます。 ポイントは error.tsx や loading.tsx などの決められた名前でコンポーネントを作成することで、エラーバウンダリーやサスペンスなどの機能が簡単に利用できるようになったことです。 これにより開発速度が上がり、面倒な実装はフレームワークに任せることができます。 また、内部で RSC を使用しており、これとサスペンスにより、コンポーネントレベルで SSR と CSR を組み合わせられるようになりました。 今回はそういった機能の、弊社プロダクトにおける使用例を紹介します。 使用技術 error.tsx エラーバウンダリーです。fallback コンポーネントを書くだけで ok です。 import {
私たちに最も寄せられる質問は次のようなものです： RemixはNext.jsと一体どう違うの? この記事では私たちはこの質問を答えるべきのようです！私たちはこの議題をストレートに、そして何の感情的な議論なしに言及していきたいと思います。もしあなたがRemixのファンになってくれていて、この記事を見て、今すぐにでもNextよりもRemixの方がすごいぜ 😎、と自慢するようなツイートをしたい気持ちが出てきたとしても、もしできれば、自慢するというような形ではツイートをなるべくしないようにお願いしたいです。私たちは Vercel で働いている方々と Vercel が立ち上がる前から友達です。そして、彼らのやっていることはとても素晴らしく、私たちは彼らを尊敬しています。 ただ、勘違いをしてほしくないのは、私たちはRemixはNext.jsよりも優れている特徴があると思っています。（そうでなければ、
Next.js App Router を例に考える、技術選定・技術との距離感 #技術選定_findy / findy 2024-01-24
https://findy.connpass.com/event/306714/
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか？
【Next.js 12 コラム追加版】2021年からReactを始めるなら React Server Components 一択ではないか？ VTeacher所属の Masaki Suzuki です。 この記事では、私が在職する SUZUKI SOFTWARE LABO, LLC というスタートアップにて、 VTeacher のプロジェクトで得た知見を紹介していきます。 前回の記事 にコラム（Next.js 12）を追加した記事です。 Next.js 12 から！正式に React Server Components が発表されましたね。 さすが 約113億円を資金調達 したVercel。Rust製コンパイラ（swc）を採用してビルドを高速化したり、ミドルウェア（エッジ関数等）導入でIaaSらしいことをしたりと目が離せません。「おまえたちはフロントに集中しろ！それ以外は俺たちがやってやる」
概要 本記事では、Next.jsをコンテナをサーバーレスで実行するサービスであるCloud Runで動作する軽量のDocker環境構築について紹介します。 ネットにある様々な記事を見てきましたが、動作目的でDockerイメージが大きくなっており、パフォーマンスとセキュリティに課題がありました。そこでDockerの軽量化および最適化を試みました。 Docker環境 シングルステージビルド（slim） シングルステージビルドしたDockerイメージです。本番環境に必要無いデータを多く含んでいるため、イメージサイズも大きくなっています。構成はシンプルのため、理解しやすいですがパフォーマンス/セキュリティ面には課題があります。 FROM node:14.17.0-slim WORKDIR /app COPY package.json yarn.lock ./ RUN yarn --frozen-l
Next.jsはGatsby.jsを倒さない
最近Next.jsがめでたくv10がリリースされたこともあってNext.jsの名前を聞く機会は増えていると思います。 Next.jsの特徴で調べると「SSG+SSRが出来るフルスタックなフレームワーク」として出てきますが、そのことによってGatsby.jsは打倒されるのではないかという疑問をよく目にするようになっていると思います。 私個人の意見として、現状Next.jsがGatsby.jsを完全に置き換えられるかという問いに対してノーと言えます。 その理由は、各フレームワークがSSGを実現するその仕組みについてを知り強み弱みを理解することで納得できるものとなるでしょう。 各フレームワークによるSSGの実行プロセス 例えば、あなたがブログサービスを作りたいとして以下の要件を決めた場合、Next.jsとGatsby.jsでSSG面に関して実装の差を見比べましょう。 - url形式は /blog
普段使いから始めるNext.js
一見小難しい印象のあるNext.jsをできるだけカジュアルな利用シーンでライトに使う際の観点を紹介・考察した本です なるべく初学者でもわかるように記述してますが、ハンズオンを意識してるものではないのでご注意ください。 また、Reactの基礎部分等についても記載していませんのでこちらもご注意ください 目次と1章は無料までは無料にしています。
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ
【Next.js】Google Analytics も YouTube iframe 埋め込みも公式ライブラリでいけるようになるぞ ちょっと株式会社 Advent Calendar 2023 12 月 24 日の記事です。 みなさんこんにちは、chot Inc. の Web エンジニアです。 Next.js で Google Analytics を導入するとき、どうしていますか？僕は毎度「nextjs google analytics」でググって「こうやるのか〜」と適当に作っています。本当にちゃんと計測されているのか疑心暗鬼です。 また、YouTube の iframe 埋め込みはどうでしょう。普通に iframe を埋め込むと PageSpeed Insights のスコアをごっそり奪っていきます。恐ろしいですね。 これらのサードパーティリソースを SPA である Next.js に導入
はじめに この記事はAuth.jsがどのようなものか，どのように実装すればいいかなどをドキュメントを要約しながら紹介するものです． 2024/02/19 追記 Auth.jsはv5で破壊的変更がありました．新たにAuth.jsを学ぶ場合には，特に理由がない限りv5を使うことをお勧めします． Auth.jsはドキュメント整備中です．現在のドキュメントとは内容が異なる場合があります．この記事では旧ドキュメントの内容も交えて解説しています． 今回はNext.js App Router実装編です．前回の記事はこちら 環境構築 JWTを用いたOAuth認証を行うためのNext.js環境を構築します．面倒であれば以下にテンプレートを用意しましたのでご自由にお使いください． まず，Next.jsを作成します．以下のコマンドを実行し，質問に答えながら構築します． √ What is your projec
※ ソースコードは 2020/11/20 時点の canary ブランチを参照しています。 Next.js 10 では next/image から提供されるコンポーネントを使用することで、開発者が特別に意識することなく画像を最適化することができるようになりました。リリースのタイミングで Next.js Conf が開催されていたこともあり、この機能は大きく話題になりました。 今回はコードを読みながら最適化の裏側を紐解いて next/image の理解を深めようと思います。 何を調べるのか 目的を持たずに読んでいると露頭に迷いそうなので、最初に何を調べるのか決めました。 今回は最適化の仕組みを紐解くことを目的として、コードを読みながら次の 2 つについて調べます。 最適化された画像の出し分け 画像最適化処理 結論 最適化された画像の出し分け img 要素の srcset 属性を利用して画面サ
Next.js に Service層 を導入する
本稿は、Next.js で「getServerSideProps や API Routes」を利用するアプリケーション向け内容になります。重厚な作りになるので、要件に適合する・しないはあると思いますので、あしからず。 Next.js は薄いフレームワーク Next.js は SPA 配信の最適化にフォーカスしており、Backend の機能面が十分とは言えません。pages の Page コンポーネントや API Routes は、controller としての機能を提供するのみです。ドキュメントを見てもわかるとおり、一連処理はあらかじめ middleware やラッパー関数を用意するのが常套手段かと思います。 NestJS にあるような Service 層が欲しい Node.js Backend フレームワークとして、NestJS は有力な候補かと思います。レイヤーやモジュール・DI の構
GitHub - vercel/virtual-event-starter-kit: Open source demo that Next.js developers can clone, deploy, and fully customize for events.
This virtual event starter kit was used to run Next.js Conf 2020, which had almost 40,000 live attendees. It includes the following features: Multiple stages - with the ability to add multiple sessions on each stage Each stage can be configured as - An embedded YouTube stream OR A live interactive audio-video experience powered by 100ms Sponsor expo, including individual virtual booths Career Fair
なんかwasmを直読み出来るんだけど Webpackがwasmの読み込みをサポートしているので、Next.jsでもちょっと設定を追加するだけで動作が確認出来ました TypeScriptの定義まで自動で行われるので、連携する上で迷うところがありません 今回作成したコード https://github.com/SoraKumo001/next-wasm RustでWebAssemblyの生成 Rustのインストール https://www.rust-lang.org/tools/install これが無いと話にならないので、とりあえずインストールする必要があります wasm-packのインストール 以下を実行してwasm-pack入れるとRustでWebAssemblyが簡単に生成できるようになります cargo install wasm-pack 必要なコード
個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011
個人ブログを Next.js + Headless WordPressに 切り替えた話 / shifter-meetup-202011
Next.js × NextAuth × Prisma × VercelPostgresで構築するモダン認証機能システム
はじめに 認証機能を一から作成したいと思い、Next.jsとNextAuthを使ったGithub認証機能の実装を行ったので、その手順を記事していきます。ユーザーデータ管理にPrismaを、データベースはVercelPostgresを使用しています。 ソースコード 実装したサンプルデータは下記リポジトリに格納しています。 バージョン情報 今回実装したバージョン情報のです。 next.js: v13.4.1 next-auth: v4.22.1 prisma/client: v4.14.1 vercel/postgres: v0.3.0 typescript: v5.0.4 技術詳細 Prisma PrismaはNode.jsとTypeScriptによる、オープンソースORM(Object Relational Mapping)です。SQL(select, insert, update, de
Next.jsとStripeで定期課金を実装する
Next.jsで構築中のフロントエンドアプリケーションに定期課金を実装したかった。読んですぐ実装できるように実装方法をメモする。 定期課金の実装にはStripeを使用する。 ※以下では、Next.jsを使った開発環境での実装について記述する。StripeのAPIにシークレットキーを使うため、本番環境ではAPIを叩く処理をサーバーサイド側に実装する必要がある。 Stripe側の設定 まずはStripeのアカウントを作成する。作成したらダッシュボードに移動する。「本番環境」と「テスト環境」があり、アカウント作成直後は「テスト環境」のダッシュボードが開く。テスト環境は実際の支払いは行われず、練習に使用できる。 認証情報をメモする テスト環境のダッシュボードに移動したら、以下の情報をメモする。以下は後ほど環境変数に設定する。 公開可能キー シークレットキー 顧客を作成する 支払いをする「顧客」の情
React Server Componentsを触ってみたログを本にまとめました。
本日11月23日Remixが正式にリリースされたので早速触ってみました。 Remixとは react-routerというライブラリーの開発元が作ったReact製のフレームワークで、Next.jsと同じようにファイルベースでルーティングできます。 そうなると、Next.jsと一体何が違うのかと感じている人も多いと思うので、 この記事ではNext.jsと比べた時のRemixの考え方の違いをまとめたいと思います。 SSGやISRはサポートしていない Next.jsにはSSGやISRなどあらかじめデータをビルドしておいてその結果をリクエスト時に返すといった機能がありますが、Remixにはありませんでした。 その代わりRemixでは以下のようにページコンポーネントごとにheadersをexportするだけでHTTP headerをコントロールできる仕組みがあるので、そこでCache-Control
next.js で自分のブログを作る
next.js で自分のブログを作る 自分のブログとして mizchi.dev を作った話 at 隅田川.js #1(オンライン) - connpass 何を作ったか このブログ自身(mizchi.dev)。スライドツールも突貫で自作 ソースコード mizchi/dev Lighthouse Full AMP GA 対応 Git から編集ヒストリの生成 どんなブログがほしかったか Lighthouse で満点出したい 普通の Markdown じゃつまんないから MDX で書きたい サーバーの運用をしたくない next.js の最適化に乗りたい 作った どうせ動かないし CDN 上で静的サイト + Full AMP MDX コンパイラを自作 (amdx) netlify + 買ったまま忘れてたカスタムドメイン(mizchi.dev) pages/*.tsx が公開される仕組みを、そのまま採
はじめに 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
「エンジニア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 + 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 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 で作ったバルーンプラン一覧検索画面) 本記事の内容 (ほぼ)個人開発においての、要件定義 → デザイン →
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
一休レストランで Next.js App Router から Remix に乗り換えた話 / Migration from Next.js App Router to Remix
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に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 13が発表されましたね！ この記事ではNext.jsの開発方法が大きく変わるポイントとなる以下の3つの新機能について取り上げます。 Layouts React Server Components Streaming それではさっそく試していくことにしましょう！ インストール ウェブアプリの雛形は以下で作成できます。
なぜLiteFS+SQLiteか 「個人開発のコストはDB次第」でサーバーレス環境でコンピューティングリソースを節約できたけどマネージドDBはまだ高いよ(要約)ということを言っていたら「本番環境でSQLiteを使うといいよ」と何人かの人に教えてもらってLitestreamのことを知った。 LitestreamはDBを読み書きするプロセスを1つにして利用するので、サーバーレス環境でsqliteファイルをパスで参照できて、複数箇所から掴まないように構築すれば条件は整えることができる(Cloud Runのように並行に呼び出してもインスタンスが共有されるサービス+最大サイズを1にしておく、とか)。 Litestreamのみでも便利に使えていたんだけど、プロジェクトをウォッチしていたらその後サーバーを複数台にしてそれぞれのインスタンスで同じ結果を得られたり、書き込み先を適切にハンドリングするデザイン
2020年2月27日、「ホットペッパービューティーコスメ」のWeb版が公開された。リクルートテクノロジーズが同サービスを開発するにあたり採用したのは、ReactとNext.jsと最新版のAMP（Accelerated Mobile Pages）である。この結果、ページの内容が表示されるまで0.2秒、画像が出るまで0.8秒、解析用のJavaScript等を含めた全てのリソースがダウンロードされるまでの時間は1.2秒以内を達成した。リクルートテクノロジーズが、これらの組み合わせを採用した背景、および開発における苦労や工夫した点などについて、同サービス開発に従事したエンジニアリング室 アプリケーションソリューショングループ グループマネジャーの古川陽介氏、メンバーの可児潤也氏、渡邉礁太郎氏に話を聞いた。 React×Next.js×AMP――この組み合わせを採用した背景 「ホットペッパービューテ
「Next.jsで理解するSSRとクライアントルーティングの違い」という名目で社内にて簡単に勉強会を行いました。本記事は、その内容を適宜編集して公開するものです。 TL;DR 以下の要約を読んで、「なんだその話か」って思った方は引き返していただいて大丈夫です。逆に「えっそうなの・・・？」と思った方は、ぜひ読んでください！ Next.jsアプリケーションにおいて、/hogeと/fugaというページがあり、それぞれgetServerSideProps()が定義されているとします 最初ブラウザで/hogeを開いたとき、Next.jsアプリケーションはブラウザから/hogeへのGETリクエストを受け取り、getServerSideProps()を実行します 次に/hogeから/fugaへrouter.pushで遷移すると、Next.jsアプリケーションはブラウザから/fugaへのGETリクエストを
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsのmiddlewareはVercel以外でも問題なく使えるか
Next.js+TypeScript+AWS Amplify+RecoilでToDoリストを作る - Qiita
Next.jsのApp Routerの機能別コードサンプル集を作った - hiroppy's site
Next.jsのルーティングにTypeScriptで型をつけたい
Next.jsで整える。デザインとロジックの分離
【Next.js】実務でapp routerに移行した所感
Remix vs Next.js - React Japan
【Node.js/Next.js】Cloud Runで動作する軽量なDockerを構築してみた
Auth.jsを完全に理解する (Next.js App Router 実装編) #2 - Qiita
Next.js 10 の画像最適化システム next/image を読んで理解を深める
Next.jsとRustのTypeScriptなWebAssembly生活 - Qiita
Next.jsが出てこないReact Server Componentsハンズオン
触ってみてわかったNext.jsと比べた時のRemixの特徴
週刊誌の動画特典ページをNext.js + Vercelで構築した話
Next.js 13で開発方法はどう変わる？
LiteFS+SQLiteでフルスタックNext.jsアプリケーションを作る
快適なUXの裏には泥臭さがあった？ 新サービス開発に「React×Next.js×AMP」採用のワケ
【図解】Next.jsで理解するSSRとクライアントルーティングの通信の仕組み