はじめに こんにちは、minne事業部Webエンジニアの@inowayです。7/6に公開したtwadaさんによる2023年度版TDDワークショップを開催しましたの記事に執筆者の一人として参加していました。単独での記事公開は今回が初めてです。 @t_wada さんのワークショップを通して、自動テストの重要性を改めて実感しました。参加後に、おすすめされていた『テスト駆動開発』や『単体テストの考え方/使い方』を読み、今では完全に自動テストの魅力にはまっています。 参加直後は「実務でTDDを実践するぞ！」と息巻いていましたが、タイムリミットのある状況下で慣れない開発手法を実践するのは心理的ハードルが高く、Red->Green->Refactoringのステップを踏みながら開発することができていませんでした。そこで、本記事では「TDDに慣れる」をテーマに、TDDで機能追加することに挑戦します。アジャ
Beyond JAMstack: Next.js creator on hybrid rendering, TypeScript and Visual Studio Code
Guillermo Rauch: 'One of the biggest performance issues that we see today is to do with advertising' Interview Guillermo Rauch, creator of the Next.js framework for building React applications, spoke to The Register about the just-released Next.js 9.3 and its hybrid approach to web application development. Rauch has been an advocate for the JAMstack for client applications, where JAM stands for "J
Angular without SSR is faster than Next.js with SSR. I have the data.
"If we really want to make our website faster, we should just rewrite it in Next.js." I think you'd be hard pressed to find a tech startup anywhere without at least one developer who is constantly saying this. But is it actually true? I certainly had no reason to doubt it. As someone who had just done the big upgrade from AngularJS to Angular, I was happy that all those months of work had resulted
Building an interactive WebGL experience in Next.jsBring your creativity to life with the web's 3D graphic rendering API. WebGL is a JavaScript API for rendering 3D graphics within a web browser, giving developers the ability to create unique, delightful graphics, unlike anything a static image is capable of. By leveraging WebGL, we were able to take what would have been a static conference signup
はじめに｜Next.jsの考え方
Caching in Next.jsNext.js improves your application's performance and reduces costs by caching rendering work and data requests. This page provides an in-depth look at Next.js caching mechanisms, the APIs you can use to configure them, and how they interact with each other. Good to know: This page helps you understand how Next.js works under the hood but is not essential knowledge to be productive
「Firebase CLIのNext.jsデプロイ対応について調べる」ではCloud FunctionsにカスタムビルドしたNext.jsアプリがデプロイされていたが、Cloud Functions (2nd gen)でCloud RunベースになったのでNext.jsのデプロイもApp HostingでCloud Run版になった 基本的なデプロイまでの手順以下のドキュメントにある。本記事ではこれを参考に内部動作を調べる firebase-tools firebase-cliの最新版に以下のコマンドが追加されている ❯ firebase --help | grep apphosting: apphosting:backends:list [options] list Firebase App Hosting backends apphosting:backends:create [opt
GitHub - hoangvvo/next-connect: The TypeScript-ready, minimal router and middleware layer for Next.js, Micro, Vercel, or Node.js http/http2
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
前回、App Routerの遷移の仕組みと実装についてまとめました。 今回はこれの続編として、App RouterのClient-side Cacheの仕様や実装についてまとめようと思います。まだドキュメントに記載のない仕様についても言及しているので、参考になる部分があれば幸いです。 App Routerのcache分類 App Routerは積極的にcacheを取り入れており、cacheは用途や段階に応じていくつかに分類することができます。まずはそのcacheの分類を確認してみましょう。 Request Deduping Request Dedupingはレンダリングツリー内で同一データのGETリクエストを行う際に、自動でまとめてくれる機能です。 nextjs.org/docsより デフォルトでサポートしているのはfetchのみですが、Reactが提供するcacheを利用することでDBア
Fullstack app with TypeScript, Next.js, Prisma & GraphQL - GraphQL API
Table of contents Introduction Development environment Clone the repository Seeding the database A look at the project structure and dependencies Building APIs the traditional way: REST REST APIs and their drawbacks Each REST API is different Overfetching and underfetching REST APIs are not typed GraphQL, an alternative to REST Defining a schema Defining object types and fields Defining Queries De
Next.js13で追加されたApp RouterとReact Server Components──UI通信の関係を再定義する
App RouterはReact Server Componentsを最大限活用する形で実装されているため、外部のデータソースに対する送受信の大半をサーバー側で行います。少し独特ながら、Web標準に寄り添った形で実現された通信周りのフレームワークについて、本記事では学んでいきます。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Sonoma 14.2.1 Node.js 21.4.0／npm 10.2.4 React 18.2.0 Next.js 14.0.4 UIと非同期通信の状態管理を擦り合わせるのは疲れる ブラウザ上でもサーバー上でも、JavaScriptのランタイムが提供する通信処理のAPIは、基本的に非同期で扱うことが推奨されています。現代
Next.js の Interception Routes について 2023.04.09 Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。Intercepting routes ではブラウザの URL を遷移先のものに上書きしつつ、現在のレイアウトに新しいページを表示できます。これは例えば Instagram のように、ユーザーのプロフィールから写真をクリックすると、写真をモーダルを開き、ページを更新したり共通したりするとデフォルトのレイアウトで表示する場合などに便利です。 Intercepting routes は Next.js 13.3 から追加された機能で、App Router（app ディレクトリ）において使用できます。 Intercepting routes ではブラ
ShopifyのStorefront APIを使用してNext.js製のECフロントを構築した | EringiDev
タイトルのとおり、ShopifyのStorefront APIを使用してNext.js製のECフロントを構築しました。 仕事でECサイトのフロントエンドを構築しているので、そこで培った技術とかノウハウを完全に自分のものとして公開できる何かがほしいなと思ったのが作り始めたきっかけです。 できあがったものCSSをほぼ書いていない状態なので、見た目に関してはご容赦ください。。 https://eringiv3-shopify-store-front-with-nextjs.vercel.app/ リポジトリhttps://github.com/EringiV3/shopify-store-front-with-nextjs 出来上がったものの解説商品一覧、商品詳細、カートトップのECサイトに必要だと思われる最低限の機能を持つ3ページを備えた構成ログインはできない購入確定画面はShopifyが提供
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号)
Next.jsのCacheを網羅したドキュメントの公開など : Cybozu Frontend Weekly (2023-08-01号) こんにちは！サイボウズ株式会社フロントエンドエキスパートチームの @nus3_ です。 はじめに サイボウズでは毎週火曜日に Frontend Weekly という「1 週間の間にあったフロントエンドニュースを共有する会」を社内で開催しています。 今回は、2023/08/01 の Frontend Weekly で取り上げた記事や話題を紹介します。 How React 18 Improves Application Performance – Vercel React18で新しく導入されたTransitions、Suspense、React Server Componentsなどをパフォーマンスの観点から解説しています。React17以前とReact18
【Next.js × @vercel/og】セミナー登壇者風に誰でも予定を告知できるアプリを作りました - Qiita
はじめに 突然ですがみなさん、 X（旧Twitter）でこんな感じのイベント告知画像を見たことはありますか？ 最近はセミナーや講演会に登壇する人たちが、イベント告知のためにこのような投稿をすることが増えているように感じます。 そして、こうした投稿を目にするたびに、自分は次のようなことを思います。 人生で １ 回でいいから！！こんな感じで予定を告知してみたい！！なんかすごそう！！ そんな（超どうでも良い個人的な）欲求を叶えるため、「誰でもセミナー登壇者風に予定を告知できるアプリ」 を作りましたので、簡単に紹介したいと思います。 （本当はクソアプリ Advent Calendarに投稿したかったけど、諸々の事情により断念） 作ったもの Seminar Post Generatorという 「セミナー登壇者風に個人的な予定を告知できるWebアプリ」 を作りました。 ▼サービスURL ▼リポジトリ
2023年夏休みの自由研究がてら、約6年メンテナンスされていなかった Next.js で作られたサイトの開発環境をアップデートしました。Next.js に関しては、なんと v3 から v13 に一気にアップデートでした。 ただやっただけだともったい無いので、せっかくなので記事に残そうと思います。同じように Next.js で作られたサイトのメンテナンスを怠っている人に届いて、何か少しでも助けになれれば幸いです。 背景 まず、アップデートをしようと思った最初のきっかけは、M1/M2 Mac で Node.js を使って普通に開発ができないことでした。6年間メンテされてなかったこともあり、この環境の Node.js のバージョンは v8.4.0 です。（当時はもちろん最新でした😂） Node.js v16 未満のバージョンを M1/M2 Mac にインストールして使うには、以下の記事のように
5 Lessons Learned From Taking Next.js App Router to Production - Inngest Blog
Next.js 13 introduced the new App Router that offers several new features, including Nested Layouts, Server Components, and Streaming. It’s the first open-source implementation that allows developers to fully leverage the primitives brought by React 18. It was in beta for a while, but since Next.js 13.4, which was just released, it’s now considered production-ready. We recently redesigned the Inng
Next.js 13.5
Back to BlogTuesday, September 19th 2023 Next.js 13.5Posted by Next.js 13.5 improves local dev performance and reliability with: 22% faster local server startup: Iterate faster with the App & Pages Router 29% faster HMR (Fast Refresh): For faster iterations when saving changes 40% less memory usage: Measured when running next start Optimized Package Imports: Faster updates when using popular icon
この本の概要 最新のNext.jsを現場で使うために実践的な知識を詰め込んだ一冊です。フレームワークの基礎はもちろん，パフォーマンスを上げるための知識や関連ライブラリまで，詳細なサンプルコードをもとに解説していきます。 こんな方におすすめ 最新のNext.jsに入門したいエンジニアやNext.jsに多少の経験があるが，より良い使い方を知りたいエンジニア 第1章：Next.jsの基礎 1.1：Next.jsプロジェクトの始め方 1.2：アプリケーションのルーティング 1.3：SPAならではのナビゲーション 1.4：ネスト可能なレイアウト 第2章：Server Componentとレンダリング 2.1：Server ComponentとClient Component 2.2：Server Componentのデータ取得 2.3：動的データ取得と静的データ取得 2.4：Routeのレンダリング
React や Next.js を採用して Web アプリケーションを開発していく際に必ず欲しくなる検索機能ですが、自前での実装は意外と困難です。 その一方で、algolia や Elastic Search を用いることで比較的用意に実装が可能かつある一定量までは無料で使用できるため、初期のプロダクトへの導入がオススメです。 今回は fwywd（フュード） のページへの検索機能を追加する具体的な手順を解説します。
この記事は？ 著者はエンジニアとしてAWS環境でのNextJSを用いた新規開発を行ってきました。その中で、ServerActionsは目を引く新技術です。本記事ではServerActionsを現場で使うテクニックを紹介します。既にAmplifyなどでも対応している内容なのでご気軽にお試しいただけます。 ServerActionsは何を解決するのか？ ServerActionsでは、form要素のactionに'use server'をつけた関数を渡すことで、JavaScriptでなくHTMLの機能だけを用いてサーバーにデータを送信することを可能にします。これによって、クライアンド側でJavaScriptがDOM処理を介する際に発生する、所謂ハイドレーションを待たずにユーザーが画面操作可能となるメリットを享受できることはServerActionsの1つの特徴です。何よりNext.jsがSer
Next.js Weekly #29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget
#29: Next.js 14, Geist, Why I’m (not) using Next.js, Oslo, Security in Next.js, React Forget Next.js Conf 2023 – This year’s Next.js Conf primarily focused on stabilizing existing features rather than introducing new ones. I recommend checking out the VoD. Here’s a quick summary of all the announcements: Next.js 14: No new APIs – As mentioned, it’s all about stability. So Next.js 14 comes with no
Next.jsを勉強してみる その① 〜何も考えず環境構築編〜 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
まいどです。LIGにジョインして5ヶ月経ちますが、コーディングしたステップ数はまだ100行に満たないバックエンドエンジニアのやなさんです。 とはいえ、私もエンジニア。現在の案件で採用されているNext.jsを勉強するため、勉強用の開発環境を構築することにしてみました。 Next.jsとは Zeit社が開発したユニバーサルなReactアプリの開発が可能なフレームワーク。よく比較されるフレームワークでいくとVue.jsを使って開発されたNuxt.jsなどがある。 今回はDockerを使って何も考えず、爆速（気分）で開発環境を構築してみようと思います。 とりあえず、立ち上げるまで頑張ってみる next.jsインストール # ルートディレクトリにsrcフォルダを作成・移動 mkdir src && cd src # Next.jsのアプリケーションの雛形を作成 $ npx create-next-
Vue.jsベースのNuxt.jsとReactベースのNext.jsは、人気のフロントエンドフレームワークとしてよく比較されますが、実際どんな違いがあるのか、様々な角度から表とグラフにまとめてみました。 2021/07/03、雇用需要比較の情報を更新しました。
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】 - Qiita
【個人開発】メモ帳感覚で使えるGitHub草生やしアプリ「Leaf Record ～大草原不可避～」を作りました【Next.js×Rails】Rails未経験個人開発Next.js はじめに こんにちは、とぴ（@topi_log）と申します。 オンラインプログラミングスクールにてRuby on Railsをメインに学習しつつ、自主学習としてフロントエンドも勉強しています。 4/26にメモ帳感覚で使えるGitHub草生やしアプリをリリースしたので、アプリ紹介と技術、感想をまとめさせていただきます。 目次 作成経緯 Webアプリ紹介 技術スタック こだわったところ UI/UX 技術面 その他 改善点・不具合 追加したいと考えている機能 ブラッシュアップの方針 感想 1. 作成経緯 オンラインプログラミングスクールにて、「ミニアプリweek」という短期間でアプリを作るイベントがあります。バグOK
はじめに 私は2021年10月からフロントエンドエンジニアへの転職を果たし、 研修で様々なアプリケーションを作成してきました。 先日まで社内用のSNSアプリケーション開発を同期の他の技術の方とチームを組んで開発を行ない、 フロントサイドとしては "Next.js"＋"TailwindCSS"＋"TypeScript" の技術を用いて開発を行いました。 この開発では、Next.jsの勉強を始めたばかりであり、その技術を使ってアプリケーションを作成したいみたいという意味合いが強かったですが、次のプロジェクトはそれぞれの技術の強みをしっかり理解した上で、その技術の強みを活かせるような開発を行なっていきたいと思っています。 しかし、いざ技術を選定する際に、Reactが良いのか、ReactのフレームワークであるNext.jsが良いのか、それぞれの強みはどこなのか等を考えた際に、知識が曖昧であることに
GitHub - shadcn-ui/taxonomy: An open source application built using the new router, server components and everything new in Next.js 13.
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 で開発していると、複数のページの getServerSidePropsで同じようなコードを度々書くことになると思う。例えば 「GraphQL クライアントでクエリを fetch して、そのレスポンスをpagePropsに焼き込むロジック」であったり、「(マルチテナントアプリケーションにおいて) リクエストヘッダーからテナントを特定するロジック」であったり。こうした大部分のページで使われるロジックのコードは、何度も書かずに済むよう、何らかの共通化をしたくなる。 すでに色々な人が似たような動機でgetServerSidePropsを共通化する方法を紹介していると思う。それを参考にしながら id:mizdra も自分流の共通化方法を実践している。何度か Next.js アプリケーションを作っているうちに、自分の型のようなものが身についてきたので、それを紹介してみる。 はじめに結論
JSer.info #656 - Next.js v13.4.16がリリースされています。 Release v13.4.16 · vercel/next.js v13.4.16には、実験的な機能としてtest modeというPlaywrightとMSWを使ったテストする仕組みが追加されています。 Next.jsのApp Directoryでは、MSWがNext.jsの処理に差し込めるポイントがなかったため、MSWが動かないなどの問題がありました。このtest modeではそれらが一部解決されてきています。 Support Next.js 13 (App directory) · Issue #1644 · mswjs/msw まだ検証目的の実験的な機能であるため今後はわかりませんが、次のDiscussionでNext.jsを使ったアプリケーションのテストについて議論されています。 RFC:
「なんだか Next.js の Static Generate に使っている外部 API 呼び出し回数が多いような？」と思っている方へ。閲覧されもしないページを、ISR（Incremental Static Regeneration）でみだりに再生成していませんか？本稿では、Link コンポーネントの振る舞いと ISG / ISR の組み合わせの際、注意したい prefetch の設定について言及します。 ISG のおさらい ISG（Incremental Static Generation）は、Next.js がオンデマンドでページを静的生成するアプローチです。「オンデマンドで静的生成する」ことで、ビルドタイムの静的生成をスキップすることができます。 getStaticPaths の fallback オプションを true か 'blocking' にすることで発動します。 これは膨大
Core Changes fix(types): allow nonpromise return types for static functions: #24685 Ensure history navigates correctly with dynamic routes + basePath: #25459 Fix external check for non-local next import: #25518 Ensure providing only query on dynamic route works as expected: #25469 Assume a recent react@experimental if reactRoot is set: #25496 Update to latest webpack 5 and webpack-sources: #25558
Next.js で next-themes と Tailwind CSS を使って Light/Dark モードを切り替える - Goodpatch Tech Blog
フロントエンドエンジニアの上垣です。 この記事では、Next.js で、next-themes と Tailwind CSS を使って Light/Dark モード切り替え対応する例を紹介しています。 github.com 前提 Tailwind CSS のダークモード Light/Dark モードの判定 Dark モードのスタイル next-themes インストール セットアップ 実行結果 Light/Dark モードの切り替え サンプルアプリケーション 感想 前提 この記事では下記のバージョンのライブラリを利用しています。 Next.js 13.4.12 next-themes 0.2.1 Tailwind CSS 3.3.2 Next.js の AppRouter を利用しています。 この記事で紹介するのは、「Light/Dark モードの切り替え」であり、Dark モード実装の詳
Next.js のドキュメントへようこそ！ Next.js を初めて使用する場合は、学習コースから始めることをお勧めします。 学習コースは翻訳されていません。 インタラクティブなクイズによる学習コースでは、Next.js を使うために必要なすべての知識を習得できます。 Next.js に関連事項する質問がある場合は、GitHub Discussions のコミュニティーでなんでも質問してください。 システム要件 Node.js 12.22.0 または、それ以降 MacOS, Windows (WSL を含む)、そして Linux をサポート 自動セットアップ すべてを自動的にセットアップする create-next-app を使って、Next.js アプリを作成することをお勧めします。プロジェクトを作成するために、次を実行します: npx create-next-app@latest #
Go 1.16のgo:embedとNext.jsの相性が悪い問題と戦う | フューチャー技術ブログ
前エントリーのGo 1.16のembedとchiとSingle Page Applicationでは、Vue.jsで生成したファイルをバンドルしました。Vue.jsや、Parcel V2でビルドしたコンテンツを配信するにはこれで問題ありません。しかし、React（Next.js）は要注意です。 フロントエンドの環境整備をどうやって行うかはいつも悩みの種ですが、そんな中、僕が3年ほど前から他の人にお勧めしていたのがNext.jsでした。ほとんどの最低限必要なツール群は整備済みで、最近のバージョンであればTypeScriptを使うのも簡単。Linter(npm exec eslint –init)とFormatter(npm install prettierと環境整備)ぐらいでコードを書き始められます。 しかし、環境構築が簡単なNext.js製のウェブアプリケーションのビルド済みのフロントエン
Import mapsはChrome系ブラウザのみがサポートしているため、他のブラウザではES Module Shimsを利用する必要があります。(rails/importmap-railsにはshimが同梱されています) Rails 7では、JavaScriptのbuildやbundleをせずにCDNからライブラリを取得できる仕組みをImport mapsを使って実現して、現在のwebpackerをオプションへと変更する予定となっています。 TypeScriptやReactのようなビルドを前提とする仕組みはwebpackerを利用する必要があります。 詳しい動作については次の動画でデモが公開されています。 Alpha preview: Modern JavaScript in Rails 7 without Webpack - YouTube JSer.infoをサポートするには 😘
JSer.info #624 - Next.js 13.1がリリースされました。 Blog - Next.js 13.1 | Next.js appディレクトリの改善、外部ライブラリだったnext-transpile-modulesを本体に統合されています。 martpie/next-transpile-modules: [ARCHIVED] Next.js plugin to transpile code from node_modules Release The End. · martpie/next-transpile-modules また、試験的にmodularizeImportsオプションの追加、Turbopackの改善などが含まれています。 Web Performance Calendar » HTTP/3 Prioritization Demystifiedという記事では、H
GitHub - dunglas/react-esi: React ESI: Blazing-fast Server-Side Rendering for React and Next.js
React ESI is a super powerful cache library for vanilla React and Next.js applications, that can make highly dynamic applications as fast as static sites. It provides a straightforward way to boost your application's performance by storing fragments of server-side rendered pages in edge cache servers. It means that after the first rendering, fragments of your pages will be served in a few millisec
And here's another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages
And here's another one: the Next.js Edge Runtime becomes the fourth full-stack framework supported by Cloudflare Pages2022-10-24 You can now deploy Next.js applications which opt in to the Edge Runtime on Cloudflare Pages. Next.js is the fourth full-stack web framework that the Pages platform officially supports, and it is one of the most popular in the 'Jamstack-y' space. Cloudflare Pages started
Build a GPT-3 app with Next.js and Vercel Edge Functions – Vercel
Building a GPT-3 app with Next.js and Vercel Edge FunctionsA full-stack template for building fast GPT-3 apps. The field of artificial intelligence continues to take the world by storm. Huge strides have been made in text and image generation through tools like ChatGPT, GPT-3, DALL-E, and Stable Diffusion. It’s spawned a wave of exciting AI startups, many of which we’re seeing built with Vercel an
Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022
Next.js 13登場、動的なWebサイトの実現を強化。複数ページでの動的データの共有や、ステートを維持した共通ナビゲーションの構築など容易に。Next.js Conf 2022 Reactベースのサーバサイドフレームワークとして知られるNext.jsの開発元のVercelは、日本時間10月25日深夜にイベント「Next.js Conf 2022」を開催。Next.jsの最新バージョンとなる「Next.js 13」を発表しました。 Next.js 13 Layouts React Server Components w/ Streaming Component-based Data Fetching & Caching Turbopack: the Rust-based Webpack successor Improved next/image @next/fonthttps://t.c
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TDDでNext.jsアプリに機能追加してみた - Pepabo Tech Portal
Build an interactive WebGL experience with Next.js – Vercel
Building Your Application: Caching | Next.js
Firebase App HostingにNext.jsがデプロイされる仕組み
Next.js App Router 知られざるClient-side Cacheの仕様
Next.js の Interception Routes について
Next.js を v3 から v13 に一気にアップデートした話
実践Next.js ——App Routerで進化するWebアプリ開発
React / Next.js に algolia を導入して検索機能を追加しよう | fwywd（フュード）powered by キカガク
【Next.js】Server Actionsを現場で使うテクニック
Nuxt.jsとNext.jsを比較して、表とグラフにまとめてみた! - Qiita
結局ReactとNext.jsのどちらで開発を進めればいいの？ - Qiita
Next.js の getServerSideProps を共通化する - mizdra's blog
2023-08-16のJS: Next.js v13.4.16(test mode)、SafariのStorage Policy、ESMへの移行(Redux)
Link と ISR が引き起こす Next.js の過負荷
Release v11.0.0 · vercel/next.js
はじめに | Next.js
2021-08-17のJS: Next.js 11.1、Rails 7で予定されているimport mapsベースのJSライブラリの利用
2022-12-28のJS: Next.js 13.1、HTTP/3 Prioritizationの仕組み、Deno 1.29、Bun 0.4