Vue.jsベースのNuxt.jsとReactベースのNext.jsは、人気のフロントエンドフレームワークとしてよく比較されますが、実際どんな違いがあるのか、様々な角度から表とグラフにまとめてみました。 2021/07/03、雇用需要比較の情報を更新しました。
はじめに 私は2021年10月からフロントエンドエンジニアへの転職を果たし、 研修で様々なアプリケーションを作成してきました。 先日まで社内用のSNSアプリケーション開発を同期の他の技術の方とチームを組んで開発を行ない、 フロントサイドとしては "Next.js"+"TailwindCSS"+"TypeScript" の技術を用いて開発を行いました。 この開発では、Next.jsの勉強を始めたばかりであり、その技術を使ってアプリケーションを作成したいみたいという意味合いが強かったですが、次のプロジェクトはそれぞれの技術の強みをしっかり理解した上で、その技術の強みを活かせるような開発を行なっていきたいと思っています。 しかし、いざ技術を選定する際に、Reactが良いのか、ReactのフレームワークであるNext.jsが良いのか、それぞれの強みはどこなのか等を考えた際に、知識が曖昧であることに
Supabaseをどこで知ったか? Vercel動かすNext.jsでDB使いたかった Vercelのインテグレーションリストを見ていたら、Supabaseを見つけた そこで知った。 Supabaseとはどんなもの? PostgreSQLのBaaS オープンソース オープンソースだけどマネージドホスティングサービスがある 無料のホスティングプランもある データベースに対応したREST APIをはやしてくれる オープンソースのPostgRESTを使っている Firebaseのようなリアルタイム要素があるっぽい ファイルを保存するストレージ機能もあるっぽい Firebaseの代替と謳うが、FirebaseはNoSQLで、SupabaseはRDBなので、ワンタッチで置き換えできる代物ではない 簡易的な認証・認可の仕組みが備わっている サインアップ、メールアドレス確認、ログイン、ログアウト、パスワ
こんにちは、あきのです。普段はWebエンジニアをやっています。 前書き 仕事でNext.jsを書いているのですがSSG SSR ISRらへんの知識があやふやだったので噛み砕いて解説してみました。間違っているところなどあれば、ご指摘していただけるとありがたいです🙇♂️ 以下、本題です。 それぞれの基本的な解説 CSR(クライアントサイドレンダリング) クライアントサイド レンダリング(CSR)は JavaScriptを使用し、直接ブラウザでページをレンダリングすることを意味します。すべてのロジック、データフェッチ、テンプレーティングやルーティングは、サーバーではなくクライアント上で扱われます。 引用元 つまりサーバーではなく、(JavaScriptによって)ブラウザ側でレンダリングする方法です。しかしCSR(クライアントサイドレンダリング)は大きいアプリケーションの場合、クライアントで処
こんにちは。データアナリティクス事業本部 サービスソリューション部の北川です。 Next.jsで、新しいルーティングシステムについての記事が公式から出ました。 今回は中でも、ようやく提案されたNested Layoutsについて調べたので、まだ正式に実装されたわけではないですが、せっかくなので記事にしました。 Appフォルダの提供 Next.jsでは、pagesフォルダの配下に作成したファイルが、そのままURLのパスとして機能します。 新しいルーティングシステムでは、pagesフォルダではなく、機能追加に対して段階的に変更できるよう、新しくappフォルダを提供する考えのようです。そのため、appフォルダとpagesフォルダは併用できそうです。アップデートによる修正や更新の負担が減るので、これはありがたいです。もちろんpagesフォルダ同様、階層を下げてパスを指定できます。 pagesフォル
I recently moved a significant codebase from Create-React-App (CRA for short) to Next and thought I would share my experience, because believe me or not, it was quite a journey (and not necessarily a pleasant one). There are plenty reasons why you might want to move to Next from a CRA app. It provides server-side rendering (SSR), and even incremental static regeneration (ISR) when hosted on Vercel
こんにちは。旅行プラットフォーム部エンジニアの東川です。 フォルシアではフロントエンドフレームワークとして Next.js を使用していますが、2020年は Next.js にとって激動の年であったといえます。 この 1 年間でバージョンは 9.1 から 10.0 に上がり、SSG(Static Site Generation), ISG(Incremental Static Generation)などの新機能が次々に追加されました。 10 月 27 日に Next.js のカンファレンス Next.js Conf の開催と同時に Next.js バージョン 10.0 が発表されました。 国際化に対応したルーティング、Next.js Analytics, Next.js Commerce, React17 対応など数多くの新機能とバージョンアップが発表されましたが、next/image は
Next.js って SEO に強いっていうけど、本当はどーなのよ 業務でブログサイトをリプレイスすることとなり、Next.js は SEO に強いと聞いたけど、どんな感じかなと思って調べてみました。 調べる前の私の知識は「SSG(もしくはISR)により、事前に静的なファイル(HTML)が作成されるため、ハイパフォーマンスなサイトができる」というものでした。 そこで、公式サイトで紹介されている SSG で構築された DEMO サイトを試しに見てみました。 確かに表示は速いですし、遷移もサクサクと動きます。でも、あれ?この遷移ってブラウザによる遷移ではなく、SPA のように JS に描写で切り替えてね?と思ったのが、最初です。 それって SEO 的にいいんだっけと。 気になったので、調べてみることにしました。 Next.js がハイパフォーマンスなサイトを作るために提供している機能を2つあげ
はじめまして。最近無性に海外旅行に行きたいと思っているフロントエンドエンジニアの内田です。 Next.jsってページごとに色々なレンダリング方法を柔軟に切り替える事が出来て便利ですよね。 ですが、利用する際にはきちんとそれらレンダリング方法のメリットとデメリットを理解する必要があるのでここにまとめておきたいと思います。 ではいってみましょー!! ■CSR(Client Side Rendering) そのままなんですが、クライアントサイドでレンダリングするフロントエンド技術手法のアーキテクチャのことを指します。 ブラウザからHTTPリクエストされると、サーバー側はビルドされたJSとCSS、中身ほぼ空っぽなHTMLファイルをHTTPレスポンスとして返却します。 初回アクセス時はHTMLファイルの中身はほぼ空なので何も表示されず、その後初期データを取得してブラウザがHTMLをレンダリングします
Vercel での環境変数周りでのあれこれ、ずっと苦しみ続けていたので自分なりのプラクティスをメモします。 辛さの原因は Vercel のアップデートのスピードが早く正しい情報にアクセスし辛いことが一因としてあるので、それをなくせたら良いなと思っています。 もしこのドキュメントが古くなっていたら Issues などからお知らせていただけると幸いです。 Next.js を前提とした解説になりますが、 Next.js の環境変数周りについては解説を省きます。 Vercel での環境変数周りがややこしいのは Next.js に起因しているものもあるとは思うのですが、話が長くなるので別の記事にて補足したいと思います。 (ビルド時・サーバー・クライアントで見える・渡せる環境変数や方法が変わる話) やりたいこと: フロント側から環境変数別にエンドポイントを切り替える Vercel は プレビュー環境と
Next.js でアプリケーションを作った際に、アクセス解析などやりたく GoogleAnalytics を導入しました。GoogleAnalytics をそのまま使うのではなく GoogleTagManager を経由すると何かと便利なので、Next.js → GoogleTagManager → GoogleAnalytics という流れで計測を行えるようにしました。 現状、インターネットにはエンジニア目線で GoogleAnalytics や GoogleTagManager について書かれた記事が少なく、これを書くことで何かの助けになると感じましたので、ここに記録しておきます。 ところで GoogleTagManager は長いので以下 GTM とします。また GoogleAnalytics も長いので以下 GA とします。 GoogleTagManager を設定する アカウント
steelydylanです。たまにOSSを開発する機会があるのですが、以前OSSを公開する時にVuePressのような気軽な静的サイトジェネレーターがReactにもあったらいいのにと探していました。 その時にNextraというとても素敵なツールを見つけたので紹介させてください。 Nextraとは Nextraの公式サイトに行けばわかることですが日本語で簡単に解説させてください。 Nextraは、Next.jsとMDXで動作するスタティックサイトジェネレーターです。実際にNext.jsを開発しているVercelで働かれているshudingという方が作られているので信頼性は高そうです。 例えば、Reactのデータフェッチ用のhooksであるSWRというライブラリのサイトもNextraで作られています。 Nextraを使えば、Next.jsを知っている人はさらに便利に使えますが知らなくてもノーコ
はじめに 最近Next.jsが話題になることや、使われることが増えてきましたね。 個人的にも実務でも個人開発でも愛用しています。 そこでこの記事では、基本的なNext.jsプロジェクトのセットアップ方法についてまとめてみたいと思います。 セットアップ手順 Create Next App 不要なファイルを削除 srcディレクトリを追加 TypeScript導入 ESLint導入 Prettier導入 Chakra UI導入 Jest導入 Renovate導入 Cypress導入 Storybook導入 hygen導入 Create Next App まずはCreate Next App[1]で雛形を作成しましょう。 ターミナルで以下のコマンドを入力します。 必要であればこの段階でGitHubなどのリモートリポジトリと連携してください。(後にGitHub ActionsでCIを使用するところが
Next.js 13 App Router の cache 周りを理解したい記事シリーズです。 Automatic fetch() Request Deduping revalidate ← この記事 fetchCache (後日公開) Incremental Static Regeneration / ISR Next.js では、もともとレンダリング方法のひとつとして、Incremental Static Regeneration = ISR が利用可能でした。 静的なページ生成を前提としながらも、一定間隔を超えた時点でページを再生成してくれる仕組みで、間隔は、getStaticProps の revalidate オプションで指定可能でした。 export async function getStaticProps() { const res = await fetch("https
Next.js でユーザ認証付きアプリケーションを作っていると「ページを表示したとき、ユーザの状態によってはリダイレクトして、別のページに飛ばしたい」というケースがあります。単純にログインしていないというものから、ユーザに閲覧権限がないなど、見れないなどいくつかケースがあると思います。 例えば、一般アカウントと管理者アカウントが存在するウェブサービスを考えてみます。これらはどちらも「User」というモデルとすることにします。そしてその「User」は内部に「一般アカウントか、管理者アカウントか」という情報を持っていて、特定の url のページは管理者でないと見れないとします。ページを表示するとき、この「User」を API で叩いて初めてどちらかがかわかる、という状態です。 例えば管理者ユーザ用の「admin/」 パス以下を考えます。これは管理者ユーザしかアクセスできないパスであるので、この
We are excited today to introduce Next.js 9.2, featuring: Built-In CSS Support for Global Stylesheets: Applications can now directly import .css files as global stylesheets. Built-In CSS Module Support for Component-Level Styles: Leveraging the .module.css convention, locally scoped CSS can be imported and used anywhere in your application. Improved Code-Splitting Strategy: The Google Chrome team
Webテクノロジーは、ほぼ毎月のように成長し、変化し続けています。 決定を下すには、各オプションの長所と短所を事前に知る必要があり、自信を持って適切な選択を行うことはますます困難になってきています。 本日はReactを利用したフレームワークであるNext JSの欠点に焦点を当てて解説していきます。 Next.jsとは Next.jsの短所 技術的な短所 プロジェクトにNext.jsは必要か? 最後に Next.jsとは Next.jsは、以前はZEITとして知られていたVercelという名前の会社が所有しており、そのオープンソース開発プロセスを主導および維持しています。 Next.jsの最初の作成者は、VercelのCEOであるGuillermo Rauch氏でした。 Next.jsのサーバーレスアプローチにより、Vercelを使用してWebサイトおよびアプリをデプロイできるため、ホスティ
これはSupershipグループ Advent Calendar 2020の7日目の記事です。 この記事では、フロントエンド開発を始めたばかりの人へ向けて、フレームワークを選ぶ際の参考になれば、と思って書かせていただきました! (※書き終わって見返すと、半分レンダリングの話してたので、タイトル詐欺かもしれない) 前提 対象読者 フロントエンド開発初学者 この記事のゴール 対象読者がフロントエンド開発をする時に、Next.jsが選択肢の1つとしてあがるようになる イントロダクション HTMLファイルとJavascriptだけでwebページを構築していた頃と比べて、昨今のフロントエンド開発は選択肢がたくさん増えています。 それは、偉大なプログラマ達が様々な機能を持ったフレームワーク/ライブラリを生み出してくれたおかげです。 我々はこれらの恩恵にあずかり、複雑なwebページを簡単なコードで実現す
こんにちは、柴田です。 Next.js 9.3からPreview Modeがサポートされました。 Preview Modeは完全にヘッドレスCMS向けに作られた機能です。 静的生成によるJamstack構成は高パフォーマンス、高セキュリティを実現しますが、プレビューの実現には工夫する必要がありました。 下書き状態の記事を確認する際に、その都度ビルドを走らせてページを生成するのは時間がかかりすぎてしまうためです。 そこで今回のNext.jsによるPreview Modeの登場です。 Preview Modeを利用すると静的生成ロジックをうまく利用してサーバーサイドレンダリング(SSR)を行い、プレビューを実現することができます。 API Routesまず前提として、Next.jsにはサーバーレス関数を起動できるAPI Routes機能があります。 `/pages/api/`以下のファイルはサ
Environment Variables Examples Environment Variables Next.js comes with built-in support for environment variables, which allows you to do the following: Use .env to load environment variables Bundle environment variables for the browser by prefixing with NEXT_PUBLIC_ Loading Environment Variables Next.js has built-in support for loading environment variables from .env* files into process.env.
経緯 趣味が手芸(ミシン)の妻からある日突然、slack でこんな画像が送信されてきました。 特に難しいものではなかったので、隙間時間でサッと作って Cloudflare Pages にデプロイしました。 Cloth Price Calculator 計算したログを残せたほうがいいんじゃないか、そのログから合計をだしたりできたほうがいいのではないかなど色々と提案してみたのですが、これくらいシンプルなほうが使い勝手がいいとのことだったので希望通りに実装しました。 結果そこそこの反響があり、せっかくなのでオフラインでも動作するように PWA 対応をしてみました。 Next.js で PWA 対応 https://github.com/hbsnow/cloth-price-calculator/tree/v1.0.0 対応前のコードは上記になります。 ここでは Next.js の公式サイトにある
Next.js はほとんど React アプリ開発のスタンダードになっているようですが、認証機能の実装に少し困りました。 要件は以下です🧐 AWS Cognito を使いたい なるべく早く構築したい セキュリティを犠牲にしたくない 今回は cognito を Next.js に良い感じに埋め込む方法をやってみたいと思います!! 細かい部分の解説まではしませんので、コードを確認してみたい方はこちらをどうぞ🙌 やる Cognito 設定 ほとんどテンプレート通りなのでざっくりいきます! ユーザープールを作成しますが、「デフォルトを確認する」でOKです。 基本はデフォルトですが、アプリクライアントだけは設定が必要なのでここで済ませましょう。名前を入力するだけでOKです。 ユーザープールが正常に作成されればOKです。 認証関係の画面には Hosted UIを利用するのでアプリクライアントを統合
こんにちは、Wantedly, inc で長期インターンをしている市古です。 https://www.wantedly.com/id/igsr5 個人的な話になりますが、先日自身のポートフォリオサイトをリリースしました。 https://igsr5.dev 後からパフォーマンスチューニングの勉強をしたかったのであえて重たく実装したのですが、next/image を導入したところ想像以上にパフォーマンスが向上したのでブログにします。 TL;DR next/image の機能をいくつか紹介 画像フォーマット最適化 画像サイズ最適化 Lazy Load 良さげなキャッシュ関連のヘッダ付与 実際どうやって画像加工をしているの? 実際に next/image でパフォーマンス改善を行ってみた パフォーマンス改善前 パフォーマンス改善後 結果 next/image 導入の気をつけポイント Next.j
[Ed. note: While we take some time to rest up over the holidays and prepare for next year, we are re-publishing our top ten posts for the year. Please enjoy our favorite work this year and we’ll see you in 2023.] In recent years, web application development has undergone a radical transformation due to the rise of Next.js. This framework allows developers to build powerful web apps with JavaScript
概要 こんにちは、都内でフロントエンドエンジニアをしてますかめぽんです。先日、便利なツールしか開発しないことで有名なあのZEITの名前が変わりVercelになった、というニュースは記憶に新しいかと思います。どんどん使い勝手がよくなっていくということで注目していきたいわけですが、昨今ではjavascrptあるいはtypescriptを中心としたアプリケーションが主流になっている中で、jamstackと呼ばれるアーキテクチャが注目されていると思います。jamstack自体は過去に執筆した記事でも紹介していて、基礎的な内容はそちらで確認してみてください。 以前はNuxt.js + Contentful + Netlifyの組み合わせでやってみましたが、今回はVercelのプロダクトと国産のヘッドレスCMSで有名なmicro CMSを使って、jamstackなブログサイトを作ってみたいと思います。
Next.jsでTailwind CSSを使えるようにする **Next.jsとはVercelが作成しているReactのフレームワークです。**面倒な設定を書かなくてもすぐに使えるZero Configを標榜しており、実際にwebpackやTypeScriptと一緒にReactを書く際にも特別な準備は不要です。SSRにも対応しており、Reactで開発するならNext.jsかFacebook製のCreate React Appを使うのがスタンダードになっています。 **また、Tailwind CSSとはユーティリティファーストのCSSフレームワークです。**その特徴は、Tailwind CSSによって提供されるクラスを組み合わせてコンポーネントを作り、サイトをデザインしていくところにあります。さらにCSSフレームワークなので、CSSに慣れていない人でも簡単に使うことができます。 関連記事:
概要 入力する項目が多い入力フォームは離脱率を考えると、1ページにまとめるよりも複数ページに分割したほうが良いとされています。 ではReactで、以下のように複数ページに分割し、進捗を表示するフォームを作成するにはどうすれば良いでしょうか。 設計 自分なりに考えた結果、以下のような設計になりました。 render hooksパターンを使用 今回の要件では、親コンポーネントでフォームのページ数を管理し、小コンポーネント側でフォームの状態を保持させる必要があります。 フォームのページ数が必然的に複数ページに分かれてしまうため、通常であればuseContextやRedux,Recoilなどのグローバルで状態を管理できるライブラリを使ってフォームの状態を保持させることになります。 そこで思いついたのが、hook自体がコンポーネントを返却するrender hooksパターン。 複数のページコンポーネ
Images are a common source of performance bottlenecks for web applications and a key focus area for optimization. Unoptimized images contribute to page bloat and accounts for over 70% of the total page weight in bytes at the 90th percentile. Multiple ways to optimize images call for an intelligent "image component" with performance solutions baked in as a default. The Aurora team worked with Next.
(SSR不要論者のはしくれとして)今までこれっぽっちも気にしてなかった、あのNext.jsです。 ここでいうSSRは、クライアントのリクエストに応じてSSRしてレスポンスを返すこと。 ただ最近仕事で使ったり、副業でも使ってたりする機会があって、一部認識を改めたところがあるのでそれをメモっておく。 静的サイトジェネレータとしてのNext.js それは、「元来のサーバーレンダリング用ミドルウェアとしてではなく、SSGを目的としたプリレンダリング用ツール」として見れば、実は結構よいのでは?というもの。 コマンドでいうところの`next build && next export`だけを使う前提。 プリレンダリングで最適化した静的なサイトにしたい けど、それぞれのページにはJSを使った処理がある 前者だけの場合は、だいたい`11ty`みたいないわゆる静的サイトジェネレータが検討されるけど、各ページで
この記事は Next.js Advent Calendar 2020 2 日目の記事です。 先日このブログと別にもう一つ別で、til.ojisan.ioというブログ的なものを作ってみました。 これはブログというより、毎日調べたことをメモするために使っています。 (というのは建前で NextJS の ISR で作る題材として作っただけです。) ISR(Incremental Static Regeneration)は NextJS9.4 で追加された機能で、動的な SSG とキャッシュを駆使したレスポンスをしてくれます。 これは SSG のデメリット(ビルド時間)を削減し、メリットのみを享受できます。 ISR についてはすでに様々な方が触れているので自分が今更触れなくてもいいと思っていたのですが、実際に使ってみた意見などは意外とないことに気づいたので、素振りをしてみた気付きやハマったことを共
表題の通りですが、Next.jsでShopifyのストアフロントをつくってみました。 もともと業務でShopifyを使っていて、技術的にSSRやSSG・ISRなどの様々なレンダリング方法に対応したNext.jsに興味があったので、その二つを合わせるような形でストアを構築してみました。 デザインはShopifyのデフォルトテーマであったDebutテーマ(いまはDawnになりましたね)を参考にしています。 (gif貼ろうとしたけど重いのか失敗...) 使用技術など ストア: https://nextjs-shopify-store.vercel.app リポジトリ: https://github.com/naoya-kuma1990/nextjs-shopify-store 使用技術: React, Next.js, TypeScript, Tailwind CSS, Material UI,
こんにちは、岩城です。 Serverless Nextjs Pluginについて調べる機会がありました。 このプラグインを使うと以下のような環境を作ってくれます。 (公式サイトからの引用) 本エントリでは、Serverless Frameworkの導入方法をはじめ、実際にデプロイしてみてどんなリソースが作成されるかを紹介します。 なお、筆者はアプリケーション開発全般よく分かりません。 やってみた Serveless Framework セットアップ まっさらな環境でセットアップしたかったので、新規で起動したEC2上で試しました。 $ cat /etc/system-release Amazon Linux release 2 (Karoo) Amazon Linux 2はデフォルトでNode.jsがインストールされていません。 はじめにNode.jsをインストールします。 $ curl -
conformはプログレッシブ・エンハンスメントを意識して作られたReactのformライブラリです。 RemixやNext.jsなどのフレームワークをサポートしています。react-hook-formのServer Actions対応は現状検証段階なのですが、conformはすでにServer Actionsにも対応しています。 本稿ではNext.js(App Router)におけるconformの使い方を中心に紹介します。 Server Actions もう散々他の記事や公式ドキュメントで紹介されていますが、簡単にServer Actionsについて復習します。 基本的な使い方 Server Actionsはクライアントサイドから呼び出すことができる、サーバー側で実行される関数です。 この機能の最も一般的なユースケースは、サーバー側のデータを変更する際に呼び出すことです。ReactはJ
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く