こんにちは。旅行プラットフォーム部エンジニアの東川です。 フォルシアではフロントエンドフレームワークとして 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 + Apollo Next.js の公式リポジトリには Apollo を使用する際のサンプルコードがあるが、 これらを参考に SSR するとかなりパフォーマンスが悪い。 with-apollo with-typescript-graphql 例えば、with-typescript-graphql の/pages/index.tsx を見てみる。 ... import { useViewerQuery, useUpdateNameMutation, ViewerDocument, } from '../lib/viewer.graphql' import { initializeApollo } from '../lib/apollo' const Index = () => { const { viewer } = useViewerQuery().data! ... re
A Next.js 14 and App Router-ready ecommerce template featuring: Next.js App Router Optimized for SEO using Next.js's Metadata React Server Components (RSCs) and Suspense Server Actions for mutations Edge Runtime New fetching and caching paradigms Dynamic OG images Styling with Tailwind CSS Checkout and payments with Shopify Automatic light/dark mode based on system settings Note: Looking for Next.
【2021年3月更新】Next.js に Zero-runtime CSS in JS の linaria を導入する
2020年に公開した記事の内容に、一部deprecatedなライブラリの利用が含まれていましたので更新しました(2021年3月24日)。 また、随時更新を可能にするためにリポジトリを公開しました。ソースを読めば分かる方はこちらをどうぞ！ linaria とは Next.js については React の Web アプリケーション向けフレームワークということで知名度が高いと思いますが、 linaria についてはまだ知名度が比較的低いかもしれません。 特筆すべき特徴として、Write CSS in JS, but with zero runtime, CSS is extracted to CSS files during buildが挙げられており、CSS in JS の形式で実装できるものの、Webpack にてビルドした後は独立した CSS ファイルとして書き出されるとのことです。 また
サーバサイドの進捗に依存しないための Next.js x GraphQL のフロントエンド開発の工夫 - Money Forward Developers Blog
こんにちは！ マネーフォワード クラウド横断本部のWebエンジニアの はるやま (@linnefromice) です。 現在クラウド横断本部では BtoB 向けサービスのリプレイスプロジェクトの開発を行っており、今回は とフロントエンド開発においてそのプロジェクトで悩んだ点とそれに対する工夫の紹介をさせていただきたいと思います！(Special Thanks かわかみさん(@thinceller)、一緒にアーキテクチャの実現とこのフローを考えてもらいました) プロジェクトの特徴 今回のプロジェクトはリプレイスのため、既存のサービスで実現している機能の再現/改善または新規機能の開発を行うのですが、 現行サービスのコアモデル/データをベースに扱う必要がある サービスの特徴として、他のクラウドサービスとの連携により実現したい機能が多い のような特徴があります。 これらの特徴により、 サーバサイド
はじめに 表題通り、Next.js + SWRでSSG or SSRとCSRを組み合わせて使用する方法について書いていこうと思います。 SEOなどのためにSSG or SSRでプリレンダリングはしておきたいが、その後はCSRでデータを更新したい、といったユースケースを想定しています。 SSG/SSR/CSRについて詳しく知りたい方はこちらの記事もご一読ください。 TL;DR getStaticProps or getServerSidePropsで取得した値をSWRConfigのvalueのfallbackオプションに渡すことで、dataが空である初期表示時はgetStaticProps or getServerSidePropsで取得した値にfallbackしてくれます。 実装例 export async function getStaticProps () { // `getStati
Cloud Build上でNext.jsのコンテナイメージのビルド速度を改善した話 - Commune Engineer Blog
はじめに SREチームの磯村です。 去年入社してからフロントエンドエンジニアとして働いていましたが今年6月からはSREチームに転属しました。 SRE見習いとして奮闘中です。 コミューンはアプリケーションの基盤としてGoogle CloudのCloud Runを利用しています。 そしてCloud Runで実行するコンテナイメージをCloud Build上でビルドしています。 この記事ではCloud Build上でのコンテナイメージのビルド速度を改善した事例を紹介します。 今回やったこと コミューンでは動作確認用の環境(develop環境と呼ばれています）や本番環境へのデプロイに20分以上かかってしまうことが頻繁に発生していました。 場合によっては29分もの時間がかかってしまう場合もありました。 このような長いデプロイ時間はメインブランチにマージできるPRの数を減少させ、変更のリードタイムを悪
Next.js 12.1
We're excited to release one of our most requested features with Next.js 12.1: On-demand ISR (Beta): Revalidate pages using getStaticProps instantly. Expanded Support for SWC: styled-components, Relay, and more. next/jest Plugin: Zero-configuration Jest support using SWC. Faster Minification with SWC (RC): 7x faster minification than Terser. Self-Hosting Improvements: ~80% smaller Docker images. R
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 は本当にSEOに強いのか調べてみた
Next.js って SEO に強いっていうけど、本当はどーなのよ 業務でブログサイトをリプレイスすることとなり、Next.js は SEO に強いと聞いたけど、どんな感じかなと思って調べてみました。 調べる前の私の知識は「SSG(もしくはISR)により、事前に静的なファイル(HTML)が作成されるため、ハイパフォーマンスなサイトができる」というものでした。 そこで、公式サイトで紹介されている SSG で構築された DEMO サイトを試しに見てみました。 確かに表示は速いですし、遷移もサクサクと動きます。でも、あれ？この遷移ってブラウザによる遷移ではなく、SPA のように JS に描写で切り替えてね？と思ったのが、最初です。 それって SEO 的にいいんだっけと。 気になったので、調べてみることにしました。 Next.js がハイパフォーマンスなサイトを作るために提供している機能を2つあげ
【動画付き】Next.js の Server Side Rendering (SSR) を理解する。create-react-app と比べてみた。 - Qiita
【動画付き】Next.js の Server Side Rendering (SSR) を理解する。create-react-app と比べてみた。JavaScriptNode.jsReactNOWNext.js Next.jsのサイト、かっこいいですよね 😊 クールで、パフォーマンスにも優れていてエンジニアを魅了します。 日本では Nuxt.js が人気のようですが、個人的には Next.js を推しています。 さて、先日 Next.js のチュートリアル を通してサーバサイドレンダリングについて考えさせられる機会がありました。本記事では、そもそもサーバサイドレンダリングのメリットとは？というところから初めて、create-react-app によって実装された SPA と、nextによって実装された SSR ではどのような違いがあるのかを検証してみました。 以下の動画は本記事のサマリ
Recently, I was refactoring my blog using Next.js by a whim. There are 3 tech stacks I would use: Next.js , a popular React framework with SSG, SSR support naturally Tailwindcss , a low-level CSS framework with the utility-first concept. AMP , an HTML framework developed by Google to make your website fast and loading smoothly. However, There are so many restrictions in AMP for performance issues.
この記事では、フロントエンドにNext.js、バックエンドにGo言語(gqlgen)を用いて、フロントエンドとバックエンド間のAPIにGraphQLを使ったアプリケーションを構築する方法をまとめます。 作成したのは以下のような簡易ブクマアプリです。 フロントエンドはほぼNext.jsのexamplesのままで、本記事ではバックエンドの実装をメインに解説します。 背景 個人的に、「フロントエンドフレームワークとGo言語の組み合わせで何か開発をしてみたい」と以前から思っていました。 そんな中、ReactのフレームワークであるNext.jsの使い勝手が良さそうという噂を耳にしました。 加えて、Next.jsのexamplesが充実していて、Apolloを使ったアプリケーションのひな形が簡単に作れることを知ったので、今回Go言語のバックエンドと組み合わせて動かしてみることにしました。 構成要素 図
はじめに Panda CSSはゼロランタイムで型安全、かつ高いDXを持ったCSS in JSライブラリです。 React Server Componentsの登場により、Emotionやstyled-componentsといったランタイムCSS in JSライブラリの見直しが必要になりつつあります。 Panda CSSはEmotionに依存しているChakra UIというUIコンポーネントライブラリがReact Server Componentsに対応するために独自開発したゼロランタイムCSS in JSライブラリです。 上記でReact Server Componentsの話が出たものの、Panda CSSは特定のUIライブラリを選ばず、多くのUIライブラリに対応しており、その点も魅力的です。 また、Panda CSSは以下に挙げているこれまでの様々なCSSライブラリからインスピレーショ
アイザックでは新規事業を Hasura + NestJS + Next.jsのmonorepo構成 で開発しており、その概要について紹介します。 最短でのPMFを狙いたい アイザックでは新規事業に力を入れており、頻繁に新規事業が立ち上がっています。 立ち上がった新規事業は、PMFを目指しPDCAを回していきます。 このPDCAを高速で回すため、エンジニアとしてはプロダクトを世の中に速くリリースすることが求められます。 開発スピードを上げる要因は様々あると思いますが、今回は実装コスト削減に焦点を当てて構成を検討しました。 全体構成 以下のような構成になっています。 実装コスト削減のポイント 少ないエンジニアでも速いスピードで世の中にプロダクトをリリースできることを目的としています。 HasuraやCodegenによる自動生成で、できるだけコードを書かずに動くものを作ろうがポイントです。 ①
JSer.info #584 - Deno 1.20がリリースされました。 Deno 1.20 Release Notes V8とRust間のOpコードの最適化をしてパフォーマンスの改善されています。 リクエストのAccept-Encodingヘッダを見て自動的にHTTP Response Bodyを圧縮するように変更されています。 また、deno benchコマンド、deno taskコマンド、deno.jsonがimportMapオプションをサポートしています。 Deno 1.19でDeno testでのリソースリークを検知する仕組みが実装されていましたが、パフォーマンスが悪化する場面がありました。 そのため、Deno 1.20では、deno testに--trace-opsフラグをつけた時のみデバッグ用の詳細な情報を表示するように変更されています。 破壊的な変更として、Workerと
Next.js 14 リリースなど: Cybozu Frontend Weekly (2023-10-31号)
はじめに こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの BaHo です。 サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/11/31 の Frontend Weekly で取り上げた記事や話題を紹介します。 取り上げた記事・話題 Rspress, the Rspack-based static site generator Rspack ベースの Static Site Generator である Rspress の v1 がリリースされました。 i18n 対応やコンポーネントのプレビューなど、様々な機能が盛り込まれているようです。 Faster TypeScript builds with --isolatedDeclarations TypeScr
はじめに 株式会社Awarefyというメンタルヘルス領域のスタートアップでフロントエンドを中心に担当している @nitaking です 2023年4月頃に構築したWEBサイトの構築した際の構成の経緯、技術選定、トラブルシューティングを備忘録として記録しておきます。 すぐ陳腐化する技術の世界なので（もう半年経って状況変わっているし）スナップショットとして活用ください。 また社内ドキュメントにもしてしまおうの趣旨なので、その点をご留意ください 時期 2023年4月頃、Next.js AppRouter(appDir)がbetaだった時期 背景 メインプロダクトはモバイルアプリ（Flutter） バックエンド通信はgRPC 全社的にクリーンアーキテクチャを導入 基本構成 React, TypeScript, Next.js React React・Next.jsの方向性にやや懐疑的な点もあったの
Next.js画像最適化のベストプラクティス：効果的な方法と手法の解説 - deve.K's Programming Primer - プログラミング初心者のための入門ブログ
現代のデジタル世界では、ウェブページやアプリにおいて画像は欠かせない要素となりました。 画像を使用することで、情報を迅速に伝えることができ、ユーザーエンゲージメントと体験を向上させることができます。 ただし、単に画像を追加するだけでは十分ではありません。画像を最適化することが重要です。 なぜなら、大きなサイズの最適化されていない画像は、ウェブサイトの読み込み速度を遅くし、ユーザーエクスペリエンスやコンバージョン率に悪影響を及ぼす可能性があるからです。 そのため、初めから画像最適化に注力することが不可欠です。特にNext.jsを使用している場合は、Imageコンポーネントを利用して効率的なNext.js画像最適化を実現することができます。 もしもあなたがNext.jsを利用しているアプリを開発している場合、本記事では効果的なNext.js画像最適化の方法について解説します。 しっかりと最適化
みなさんこんにちは！ 2023年は「Cloud Run を触って覚える」をテーマとした一人アドベントカレンダーを一人で開催したいと思います。Cloud Run のさまざまな機能や、Cloud Run でよく使う構成などを実際の使い方と一緒にご紹介したいと思います。 初日は、私自身がデモなどでよく使う Next.js を Cloud Run にデプロイする方法を紹介します。 Cloud Run の概要は技術評論社さまのブログ「gihyo.jp」に寄稿した記事で解説していますのでこちらもぜひご覧ください。 Next.js アプリの作成 まずは Cloud Run でホスティングする Next.js のサンプルアプリを作ります。 Dockerfile 付きのサンプルアプリは Next.js 公式として公開されているので、コンテナ化した Next.js アプリは簡単に作ることができます。 FROM
GitHub - blitz-js/next.js: The official Blitz.js fork of 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
Why Next.js 私は、業務でもプライベートでも Next.js を使っています。 Next.js は "Zero Config" をうたっているわけですが、実際業務で使うとなると、なかなか Zero とはいきません。IE11用にトランスパイルが必要になったり、ソースマップのアップロードのために webpack の拡張が必要なるケースにおいては、next.config.js のカスタマイズが必要になります。 そういったカスタマイズをサポートし、設定のストレスから我々エンジニアを開放してくれるパッケージが世の中にはたくさんあります。ということで、自分以外の方々が next.config.js にどのようなプラグインを入れているか気になりました。 まずは、自分がどのようなプラグインを入れているかシェアしたいと思います。 「自分はこんなプラグイン入れていて便利ですよ」みたいなシェアを、Tw
この記事は カオナビ Advent Calendar 2021 17日目です。 はじめに 株式会社カオナビのフロントエンドエンジニアの@shinji_beckyです。 先日Next.js ConfがありNext.js 12で様々な機能のリリースが紹介されました。 その中にReact18のサポートがされるという内容があり、SSR Streamingの話がありました。 Suspenseとかその辺の話かな〜くらいには思ってましたが、「まだよーわからん」状態だったのであらためて調べてみました。 いろいろ調べた中でこちらのページがめちゃめちゃ参考になりました。 基本的にはこちらの内容ベースなのでより詳しい話はこちらを読んでいただけると幸いです。 Server-Side Rendering(SSR)のはなし SSRとは SSRとはなんぞや。 簡単に説明すると「サーバーサイドで事前にレンダリングしたペー
コードベースのデザインツール「UXPin Merge」をNext.jsで試してみた | DevelopersIO
こんにちは！DA(データアナリティクス)事業本部 サービスソリューション部の大高です。 最近コードベースのデザインツール「UXPin Merge」を触る機会をいただいたので、実際に試したことをまとめたいと思います。 UXPin Mergeとは？ UXPin Mergeはコードベースのデザインツールです。 一般的なデザインツールでは描画したものはベクター、ラスターのイメージデータとして扱われますが、UXPinで描画したものはコード化が行われ実際に動作するコンポーネントとしてレンダリングされます。 また、UXPin Mergeでは作成したReactコンポーネントをインポートしてデザインに利用することができます。 今回試してみたこと UXPin Mergeでは「React」に対応していますが、今回は「Next.js」のプロジェクトでコンポーネントを作成し、作成したものをUXPinに取り込んで利用
AWS Lambda Web AdapterでServerless Next.jsを実現する - Activ8 Tech Blog
こんにちは、フロントエンドエンジニアの堀江（@nandemo_3_）です。 2023年6月22、23日にAWS Dev Day 2023が開催されましたが、 「モダンフロントエンド デザインパターン〜優れたUXを実現するには〜」というフロントエンドの最新動向に関するセッションがありました。 speakerdeck.com そこで、Serverless Next.jsとそれをAWSで実現するインフラストラクチャーが紹介されており、 今回は、それを具体的に実現する方法をまとめました。 はじめに まず、今回Serverless Next.jsを実現するために、AWS Lambda Web Adapterを使います。 Lambdaは、主にAPIなどのサーバサイド処理をサーバレスで実現するために使われますが、 AWS Lambda Web Adapterを用いることで、Lambda関数をWebアプリ
こんにちは丸山@h13i32maruです。すごい今更ながらNext.jsに入門したので感想をメモしておこうと思います。 入門資料 @hokacchaさんがクックパッド社のインターンシップ用に公開している動画を見て入門しました。要点がコンパクトにまとまってるので、これを見れば基本は理解できるようになってよかったです。 SSG CodeLunch.fmのサイトをNext.jsのSSGで作り直しました。もともとreact-dom/serverのrenderToString()を使ってなんちゃってSSGを自前で実装していたので、移行は簡単でした。getStaticPropsやgetStaticPathsの仕組みはうまいこと考えられてていいな〜と思いました。 それと、データを特に持っていない本当の静的サイトでもNext.js使ってSSGで作るのは良さそうと思いました。サイト内のパーツをReactコン
Next.js 13のappディレクトリの基礎(Layout, Suspense, Data Fetching...)
Next.js 13の新機能であるappディレクトリは本記事公開時はbetaで現在も開発中ですがNext.js 13でプロジェクトを作成後にNext.jsの設定ファイルであるnext.config.jsでexperimentalとして設定を行うことで利用することができます。今後仕様が変わると思いますがappディレクトリの設定方法を中心にNext.js 13の機能説明を行っています。 プロジェクトの作成 create-next-appコマンドを利用してプロジェクトの作成を行います。プロジェクト名はnextjs-13に設定していますが任意の名前をつけてください。JavaScriptとTypeScriptのどちらかを選択することができますが本文書ではTypeScriptを選択します。プロジェクト作成時にappディレクトリを利用するかどうかも聞かれます。 % npx create-next-app
Learn how to use Docker to create images for development and production. Imagine that you have developed a full fledged working application and want other developers to contribute to the project. Now if the application consists of different components like UI, running server, database etc. The new developer should install the exact configuration of the entire stack on to his/her system before star
SQLite + Litestream + CloudRun で「個人開発並みの予算でもSQLを捨てない」バックエンド構築（Next.jsを例にして） - Qiita
SQLite + Litestream + CloudRun で「個人開発並みの予算でもSQLを捨てない」バックエンド構築（Next.jsを例にして）SQLite3個人開発Next.jsCloudRunLitestream この記事を書くに至った経緯と目的 個人開発やまだ利益の出ていないアプリって、予算の制約から選べるDBが限られてしまうことがあるよね。 具体的には Amazon DynamoDB や Cloud FireStore のような 「アクセス回数や通信量、保存サイズなどで金額が決まるDB（インスタンス起動時間ではなく）」 を選ぶことが多いと思うのだけど、これらのDBはNoSQLである以上、文字通り、SQLを使えないという難点がある。 だけどNoSQLのノウハウはちょっと一癖あるから、できることなら通常のRDBMSのようにSQLを使いたい... って人が結構いるんじゃないかなと思
導入 Next.js 13では、目玉機能としてServer Componentsが導入されています。 多くの方が、React 18のRFCや解説を読み、「なんだこれは...」となったのではないでしょうか。（筆者はなりました） 筆者は20時間以上かけて、Next.js 13のドキュメントをほぼ全て読み、片っ端から動作を確認しました。 その結果、Next.js 13において、Server Componentsは難しいものではないという結論に至りました。 この記事では、筆者の調査結果を踏まえ、Server Componentsが全く難しい技術ではないことを説明したいと思います。 この記事のゴール Next.js 12 → Next.js 13においてServer Compoentnsに不安を感じている方が、「なんだ、Server Components楽勝じゃん」と思えること 結論 Next.js
JSer.info #609 - Next.js 12.3がリリースされました。 Blog - Next.js 12.3 | Next.js TypeScriptの自動インストールに対応、.envなどの変更にFast Refreshが対応、next/future/imageコンポーネントの改善が含まれています。 また実験的なオプションとしてunoptimizedの追加され、SWCでコードを圧縮するswcMinifyがStableとなりました。 npm v9.0.0-pre.0リリースされています。 Release v9.0.0-pre.0 · npm/cli Node.js 12のサポート終了されています。 workspacesでsemverのrangeを指定できるように、npm birthdayコマンド、npm binコマンドの削除されています。 また、npm pkgコマンドがあるため、
メディアを Next.js/Headless CMS でメディアを開発を行っているので、の技術選定やハマりどころをまとめていきます。 使用している技術の概要は下記です。 Next.js は Serverless Framework を使用して AWS 上にデプロイ Headless CMS は、Prismic を使用 Serverless frameworkの選定理由 AWS からインフラを分離したくない事情があったため、Vercel や Firebase Hosting 等は選択肢外でした。 別のプロダクトでは ecs を使用しているのですが、メディアはメインプロダクトではないため、インフラの管理・スケール等を考える必要性はなくしたいため、Serverless Framework でリソースの管理をするようにしました。 Serverless frameworkで良かったこと ソースコード
経緯 Axiosに認証トークンを設定する処理を共通化したい 何ならAxiosを使用する際にトークン設定済みの状態にしたい 方法 Axiosのインスタンスを生成→ヘッダーの設定→そのインスタンスの返却、を行うラッパー?ソースファイルを用意する。 各ソースファイルでAxiosを使用したいときは、そのラッパーファイルから呼ぶようにする。 実装 ラッパーファイル（例：customAxios.ts） import axios from 'axios'; // Axios本体をインポート const instance = axios.create(); // Axiosインスタンスを生成 instance.interceptors.request.use( (config) => { // 認証トークンをヘッダーに付与 config.headers.common['Authorization'] =
この本ではFirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ります。
Next.js + AWS Amplify + Graphqlで作るサーバーレスアプリケーション環境構築 - Qiita
概要 こんにちは、先日AWSのre:Inventで発表されたAWS Amplify DataStoreがめちゃくちゃ便利すぎて驚きを隠せない、都内でフロントエンドエンジニアをしていますかめぽんです。 今まで、VueやNuxtでの開発がメインでやってきておりましてReact、Nextでの開発経験が少なくまたTypescriptでなにか出来ないかなと探しておりました。 最近だとモバイル開発のためのAWSのサービスをインテグレートしたAWS版firebaseのようなAmplifyというサービスが出ています。内容をみてみると、何やら爆速でサーバーレスアプリケーションが出来そうだなと感じたので、Next.js + AmplifyでTodoアプリを作ってみました。巷では、Nuxt.js + firebaseの組み合わせの記事がかなり多かったですが、こちらのアーキテクチャでも実装出来たのでその方法を体系
2年ほど前にNuxt.jsを使ってポートフォリオサイトを作成しました。 今回、このサイトをNext.js + Railsでリニューアルしたので、経緯を記事にまとめます。 リニューアル後のページ https://portfolio.y-uuu.net/ デザインは前回のものを踏襲していて、ほとんど変わっていません。 リポジトリ フロントエンド: https://github.com/yuuu/portfolio_v2_ui バックエンド: https://github.com/yuuu/portfolio_v2_api リニューアルの目的 Next.jsを使って何か作りたい 昨年からReactやNext.jsを触ってノウハウを蓄積するようにしています。私自身普段はRailsを使った開発をしているので、Next.jsを採用するとしたらRailsと組み合わせて使う可能性が高いです。 昨今のフロン
サンプルで作ったNextjsのプロジェクトをVercelでこちらのサンプルブログをデプロイしてみます！ Vercelでもやってみたのですが、使いたい機能を有料じゃないと使えなかったので、CloudFlareも試してみます！ やりたいこと Next.jsで作ったブログを公開したい 本番環境と開発環境を用意したい 開発環境には認証をかけたい カスタムドメインにする 他にも試したみたいことはたくさんありますが、とりあえず初回なのでこれだけできればよしとします。 リンク サービスページ https://pages.cloudflare.com/ 公式ドキュメント https://developers.cloudflare.com/pages/getting-started Cloudflare Pagesにデプロイするまで Cloudflareのアカウントを作る https://dash.clou
One of the most challenging aspects of being an engineer is knowing when to introduce abstractions and when to keep things simple. How many times have you invested time in building a scalable system up front, planning for growth that never comes to fruition? We're certainly no stranger to this age-old engineering dilemma. At the end of 2020, however, we decided the time had come to invest in scala
Docs | Next.js
IntroductionWelcome to the Next.js documentation! What is Next.js? Next.js is a React framework for building full-stack web applications. You use React Components to build user interfaces, and Next.js for additional features and optimizations. Under the hood, Next.js also abstracts and automatically configures tooling needed for React, like bundling, compiling, and more. This allows you to focus o
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
OpenAI + Vercel + Next.jsで構築された、質問に対しAIが回答するシンプルなOSS・「Teach Anything」 - かちびと.net
Next.js 10 の新機能 next/image のオプション全部触ってみる
Next.js + ApolloでSSRするときにパフォーマンスが低下する問題について
GitHub - vercel/commerce: Next.js Commerce
Next.js + SWRでSSG or SSRとCSRを組み合わせて使用する
next.js/examples at canary · vercel/next.js
How to use tailwindcss with AMP in a Next.js project
Next.jsとGo言語(gqlgen)でGraphQLを使ったアプリケーションを構築する方法 - Qiita
次世代のCSS in JS、Panda CSSをNext.js Appルーターで使用する
Hasura + NestJS + Next.jsでの爆速開発構成 - aisaac技術ブログ
2022-03-24のJS: Deno 1.20、Faker v6.0.0、Next.jsのアップデート
【Next.js】AppRouter beta時代の技術構成・選定・トラブルシューティングログ
Cloud Run ことはじめ - Next.js アプリを 10 分でデプロイする
【Next.js】みんな next.confing.js にどんなプラグイン入れてる？
【Next.js x React18】SSR Streamingについてまとめてみた
今更ながらNext.jsに入門した - maru source
How I Dockerized my Next.js website?
Next.js 13のServer Componentsは書き方が便利になるだけ
2022-09-13のJS: Next.js 12.3、npm 9 preリリース、Safari 16
Next.js/Serverless Frameworkでisr対応サイトを立ち上げる
Next.jsでトークン設定済みのAxiosを使えるようにしてみた - Qiita
FirebaseとTypeScriptとNext.jsを使ってリアルタイムチャットアプリを作ろう
Next.js + RailsでポートフォリオサイトをISR対応＆メンテナンスフリー化した - Qiita
Cloudflare PagesでNext.jsのプロジェクトをデプロイしてみた
Migrating Notion's marketing site to Next.js