vinext を試してみる
takeharak
Cloudflare が "How we rebuilt Next.js with AI in one week" と銘打った公式ブログの記事で、 AI ドリブンな Next.js の Vite リインプリメテーションである vinext を発表し、ベンチマークでの爆速ビルドと軽量バンドルに釣られたので実際に試してみた
今回の環境
TL;DR
１． Next.js プロジェクトの作成
npx -y create-next-app@latest my-app --yes
Creating a new Next.js app in /workspaces/my-app.
Using npm.
Initializing project with template: app-tw
Installing dependencies:
- next
- react
- react-dom
Installing devDependencies:
- @tailwindcss/postcss
- @types/node
- @types/react
- @types/react-dom
- eslint
- eslint-config-next
- tailwindcss
- typescript
added 360 packages, and audited 361 packages in 22s
144 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Generating route types...
✓ Types generated successfully
Initialized a git repository.
Success! Created my-app at /workspaces/my-app
２． vinext のインストール
npx -y vinext init
vinext init
Running compatibility check...
vinext compatibility report
========================================
Imports: 1/2 fully supported
~ next/font/google (1 file) — fonts loaded from CDN, not self-hosted at build time
✓ next/image (1 file) — uses @unpic/react (no local optimization yet)
Libraries: 1/1 compatible
✓ tailwindcss
Project structure:
✓ App Router (app/)
✓ 1 page(s)
✓ 1 layout(s)
✗ Missing "type": "module" in package.json — required for Vite — vinext init will add it automatically
----------------------------------------
Overall: 79% compatible (5 supported, 1 partial, 1 issues)
Issues to address:
✗ Missing "type": "module" in package.json — required for Vite — vinext init will add it automatically
Partial support (may need attention):
~ next/font/google — fonts loaded from CDN, not self-hosted at build time
Upgrading react, react-dom...
added 6 packages, changed 2 packages, and audited 367 packages in 2s
147 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
Installing vinext, vite, @vitejs/plugin-rsc, react-server-dom-webpack...
added 109 packages, and audited 476 packages in 10s
158 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
vinext init complete!
✓ Added vinext, vite, @vitejs/plugin-rsc, react-server-dom-webpack to devDependencies
✓ Added "type": "module" to package.json
✓ Added dev:vinext script
✓ Added build:vinext script
✓ Generated vite.config.ts
✓ Added /dist/ to .gitignore
Next steps:
npm run dev:vinext Start the vinext dev server
npm run dev Start Next.js (still works as before)
３． ビルド比較してみる
Next.js (Turbopack)
time npm run build
> my-app@0.1.0 build
> next build
▲ Next.js 16.1.6 (Turbopack)
Creating an optimized production build ...
✓ Compiled successfully in 1791.2ms
✓ Finished TypeScript in 1490.7ms
✓ Collecting page data using 7 workers in 729.3ms
✓ Generating static pages using 7 workers (4/4) in 355.8ms
✓ Finalizing page optimization in 6.6ms
Route (app)
┌ ○ /
└ ○ /_not-found
○ (Static) prerendered as static content
real 0m6.451s
user 0m10.913s
sys 0m1.332s
vinext (Vite 7 / Rollup)
time npm run build:vinext
> my-app@0.1.0 build:vinext
> vite build
[1/5] analyze client references...
vite v7.3.1 building rsc environment for production...
✓ 63 modules transformed.
✓ built in 465ms
[2/5] analyze server references...
vite v7.3.1 building ssr environment for production...
✓ 20 modules transformed.
✓ built in 57ms
[3/5] build rsc environment...
vite v7.3.1 building rsc environment for production...
✓ 63 modules transformed.
dist/server/assets/index-DcmnEmc1.css 9.84 kB
dist/server/index.js 366.39 kB
✓ built in 680ms
[4/5] build client environment...
vite v7.3.1 building client environment for production...
✓ 42 modules transformed.
Initially, there are
2 chunks, of which
1 are below minChunkSize.
After merging chunks, there are
2 chunks, of which
1 are below minChunkSize.
dist/client/assets/index-DcmnEmc1.css 9.84 kB │ gzip: 2.88 kB
dist/client/assets/facade__virtual_vinext-rsc-entry-BYCpXZF-.js 1.48 kB │ gzip: 0.64 kB
dist/client/assets/index-r4pmYs9B.js 31.60 kB │ gzip: 10.59 kB
dist/client/assets/framework-Ce_Irb5n.js 192.50 kB │ gzip: 60.39 kB
✓ built in 528ms
[5/5] build ssr environment...
vite v7.3.1 building ssr environment for production...
✓ 21 modules transformed.
[plugin vite:reporter]
(!) /workspaces/vinext/my-app/node_modules/vinext/dist/shims/navigation.js is dynamically imported by virtual:vinext-app-ssr-entry but also statically imported by virtual:vinext-app-ssr-entry, /workspaces/vinext/my-app/node_modules/vinext/dist/shims/error-boundary.js, /workspaces/vinext/my-app/node_modules/vinext/dist/shims/layout-segment-context.js, /workspaces/vinext/my-app/node_modules/vinext/dist/shims/navigation-state.js, dynamic import will not move module into another chunk.
dist/server/ssr/assets/facade__virtual_vinext-rsc-entry-BnODyBkI.js 2.52 kB
dist/server/ssr/index.js 84.07 kB
✓ built in 127ms
real 0m2.375s
user 0m3.088s
sys 0m0.347s