最近になって Frontend Ops の傭兵として活動を始めました。 Frontend Ops 実践のモデルケースとして、 株式会社GiXo様で Next.js 仕事に取り組ませいただきました。今回、その内容を公開する許可を頂けたので、事例として公開させていただきます。 依頼主 株式会社GiXo様 以下、敬称略 相談内容 フロントエンド関連のリポジトリで、Next.js のビルドが遅くなってしまった。 重いことに起因して Vercel CI で OOM で確率的に落ちるようになった。CIが信用できなくなり、とりあえず再ビルドするクセがついてしまって、生産性が落ちている。 モノレポ内にとくに重いアプリケーションが一つあり、これを調査・解決してほしい。 仮ゴール: VercelCI 上のビルド時間を半分OOM が発生しないようにしたい 調査フェーズ リポジトリの閲覧権を頂き、プロジェクト構成
ReactJS: Keep Simple. Everything can be a component!
Zag.js が良いかもしれない
Zag.js を調べた背景 私は Chakra UI ユーザーなのですが、Chakra UI はスタイリング部分でランタイム CSS-in-JS（= emotion）を使用しているため、レンダリング時のパフォーマンス影響を考えると、どこかで移行するタイミングがありそうだと思っています。もちろん、Chakra UI がランタイム CSS-in-JS を捨ててくれれば移行は必要ありませんが、Chakra UI のロードマップを見たところ、明確にスケジューリングされていません（未来のどこかで移行はされそう）。そのため、移行先を探していたのですが、Chakra UI の作成者のアデバヨさんが作った Zag.js はとりあえず見とかないといけないよな、という感じで見始めました。 Zag.js が作られた背景 Chakra UI が抱えている技術的課題は先述の通り、ランタイム CSS-in-JS が内
v0とshadcn CLI：AI駆動のNext.jsプロジェクトセットアップガイド - Sun wood AI labs.2
はじめに 本ガイドでは、v0で生成されたコンポーネントをshadcn CLIを使用してNext.jsプロジェクトに統合する方法を、実際のコマンドライン操作に基づいて説明します。この方法を使用することで、AIの力を活用した効率的な開発ワークフローを構築できます。 デモ動画 「v0 + shadcn/ui CLI」を使ってエヴァンゲリオン NERV の戦闘情報センター (CIC)のダッシュボードをローカルで起動してみた！！ 右往左往も含めて4分以内でできました！ ＊動画は早回し＋カットしてます https://t.co/nzU4ADkmhR pic.twitter.com/k3hLy4OHVz — Maki@Sunwood AI Labs. (@hAru_mAki_ch) September 1, 2024 v0とは v0は、Vercelが開発した革新的なAI駆動のUIコンポーネント生成プラッ
JavaScript Primer v6.0.0をリリースしました 🎉 JavaScript Primer v6.0.0では、ECMAScript 2024の対応とNode.jsのユースケースを新たに増えたnode:utilのparseArgs関数やnode:testを使うように書き直しています。 JavaScript Primer Sponsors JavaScript Primer(jsprimer)では、Open Collectiveを通じてプロジェクトの更新に関わる資金を募っています。 JavaScript Primer - Open Collective 今回のv6リリースにおいては、次の方々にご支援いただきました！ 株式会社コクチョウさんは、Yearly Gold Sponsorとしてご支援いただいています。 ご支援ありがとうございます！ JavaScript Primerス
Remix + Cloudflare + Prisma で、Node.jsとWrangler実行時にimportを適切に切り替える
開発時の実行方法によってランタイム環境が異なるため、インポートするパッケージを変えなければなりません。 実行環境によるインポートファイルの切り替え インポートの切り替えは Vite の機能を使えば簡単に行えます。 vite でエイリアスを仕込む vite.config.ts NODE_ENV に応じて、インポート時のコードが切り替わるようにします。 import { vitePlugin as remix, cloudflareDevProxyVitePlugin as remixCloudflareDevProxy, } from "@remix-run/dev"; import { defineConfig } from "vite"; import tsconfigPaths from "vite-tsconfig-paths"; import path from "path"; e
JSer.info #705 - webpackとの互換性を持つようにRustで書かれたbundlerであるRspack 1.0がリリースされました。 Announcing Rspack 1.0 - Rspack 0.7からの破壊的な変更もいくつか含まれているため、マイグレーションガイドも公開されています。 Migrating from Rspack 0.x - Rspack Safari Technology Preview 202がリリースされました。 Release Notes for Safari Technology Preview 202 CSSのbackground-clip: border-area/ruby-align、shape() function/@pageでjis-b4とjis-b5のサポートなどが追加されています。 また、ECMAScript Proposal
Components: <Form> | Next.js
This API is currently in the canary channel and not yet available in a stable version. The <Form> component extends the HTML <form> element to provide prefetching of loading UI, client-side navigation on submission, and progressive enhancement. It's useful for forms that update URL search params as it reduces the boilerplate code needed to achieve the above. Basic usage: import Form from 'next/for
ruby.wasm の JS ライブラリは JavaScript に対する薄いラッパーなので、そのままだと Ruby では使いにくいことがあるので、最近は JS を Ruby らしく使えるようにするためのライブラリを作ってそれを使ってる。 github.com 使い方 <!DOCTYPE html> <html> <script src="https://cdn.jsdelivr.net/npm/@ruby/3.3-wasm-wasi@2.6.2/dist/browser.script.iife.js"></script> <script type="text/ruby" src="https://cdn.jsdelivr.net/gh/tmtm/jsrb@v0.1.0/jsrb.rb"></script> <script type="text/ruby"> ... </script> <
今回使用したソースコード Next.jsのセットアップ Next.js本体の準備 公式に則り npx create-next-app@latestで開始します。 $ npx create-next-app@latest ✔ What is your project named? … worksample-nextjs14 ✔ Would you like to use TypeScript? … No / Yes ✔ Would you like to use ESLint? … No / Yes ✔ Would you like to use Tailwind CSS? … No / Yes ✔ Would you like to use `src/` directory? … No / Yes ✔ Would you like to use App Router? (recommend
Node.js — Node v22.8.0 (Current)
2024-09-03, Version 22.8.0 (Current), @RafaelGSS New JS API for compile cache This release adds a new API module.enableCompileCache() that can be used to enable on-disk code caching of all modules loaded after this API is called. Previously this could only be enabled by the NODE_COMPILE_CACHE environment variable, so it could only set by end-users. This API allows tooling and library authors to en
はじめに 今回はじめてNext.jsを使用したアプリの開発をしました。 今まではReactとViteという組み合わせで作成することが多かったので、Next.jsに慣れておらず、苦戦しながらもなんとか作成をすることができました。 開発したアプリの詳細とNext.jsを使ってみた所感を共有したいと思います。 アプリのご紹介 概要 Qiita と MicroCMS の API を利用してブログや記事を掲載するサイトです。 使用している技術スタック - 環境 Next.js: v14.2.6 firebase: 10.13.0 - 言語 typescript: 5.3.3 - ライブラリ react: 18.2.0 react-hook-form: 7.52.2 react-markdown: 9.0.1 react-dom: 18.2.0 - CSS tailwindcss: 3.4.10 da
New & Noteworthy Drop support for NodeJS prior to v18 Drop support for TypeScript prior to v5 Remove v8 deprecations For more see our migration guide You can already read a draft of upcoming change announcement in #3056 What's Changed infra!: drop NodeJS v14 and v16 support by @Shinigami92 in #2121 chore(deps): update devdependencies (major) by @renovate in #2540 chore(deps): update vitest to v1 (
GitHub - antfu/oniguruma-to-js: Covert Oniguruma-flavor Regexp to JavaScript native RegExp.
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
【Node.js】Express.jsを使う場合と使わない場合でWeb API作成方法を比較してみた | DevelopersIO
リテールアプリ共創部のるおんです。先日バックエンドの初期開発において Express.js の環境構築を実装する機会がありました。自分自身Express.jsを用いてバックエンド開発を行ったことがなかったのでこのフレームワークを導入するメリットがわかりませんでした。そのため、今回はNode.jsでWeb APIを作成する際に、Express.jsを使用する場合と使用しない場合の違いを比較してみました。Express.jsを使用せずにNode.js単体で実装した場合とコードを比較することで、Express.jsを使用する利点を具体的に理解できると思います。 Express.jsとは Express.jsは、Node.js用の高速で最小限の機能を持つWebアプリケーションフレームワークです。2010年に最初のバージョンがリリースされて以来、Node.jsエコシステムの中で最も人気のあるフレーム
Progressive Web Applications (PWA)Progressive Web Applications (PWAs) offer the reach and accessibility of web applications combined with the features and user experience of native mobile apps. With Next.js, you can create PWAs that provide a seamless, app-like experience across all platforms without the need for multiple codebases or app store approvals. PWAs allow you to: Deploy updates instantl
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ジャイアントパンダに注意 - Next.js のビルド改善 (株式会社GiXo様)
Next.jsでクエリパラメータを楽に扱おう nuqsを紹介！
JavaScript Primer v6.0.0リリース: ES2024の対応とNode.jsのユースケースを刷新
2024-09-01のJS: Rspack 1.0、Safari Technology Preview 202、Material UI v6
JSrb - ruby.wasm の JS を Ruby ぽく使えるようにする - tmtms のメモ
Next.js14をVercelにデプロイするまで。+v0+Prisma+Neon
【Next.js + Typescript】ブログサイトを個人開発 - Qiita
Release v9.0.0 · faker-js/faker
Configuring: Progressive Web Applications (PWA) | Next.js