feat: --rspack flag for create next app (#79077)

<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->

The PR has resolved the failures in
`test/integration/create-next-app/templates/*.test.js`.

The `create-next-app` CLI now supports a `--rspack` flag to initialize
projects with Rspack.

Test cases in `test/integration/create-next-app/templates/*.test.js`
have been updated to conditionally use `--rspack` based on
`process.env.NEXT_RSPACK`.

---------

Co-authored-by: JJ Kasper <[email protected]>
This commit is contained in:
Cong-Cong Pan
2025-05-16 13:24:57 -07:00
committed by GitHub
co-authored by JJ Kasper
parent 6a91ff2cfa
commit 7e5ed3b182
11 changed files with 185 additions and 87 deletions
+3
View File
@@ -38,6 +38,7 @@ export async function createApp({
empty,
api,
turbopack,
rspack,
disableGit,
}: {
appPath: string
@@ -54,6 +55,7 @@ export async function createApp({
empty: boolean
api?: boolean
turbopack: boolean
rspack: boolean
disableGit?: boolean
}): Promise<void> {
let repoInfo: RepoInfo | undefined
@@ -237,6 +239,7 @@ export async function createApp({
importAlias,
skipInstall,
turbopack,
rspack,
})
}
+3
View File
@@ -53,6 +53,7 @@ const program = new Command(packageJson.name)
.option('--app', 'Initialize as an App Router project.')
.option('--src-dir', "Initialize inside a 'src/' directory.")
.option('--turbopack', 'Enable Turbopack by default for development.')
.option('--rspack', 'Using Rspack as the bundler')
.option(
'--import-alias <prefix/*>',
'Specify import alias to use (default "@/*").'
@@ -432,6 +433,7 @@ async function run(): Promise<void> {
empty: opts.empty,
api: opts.api,
turbopack: opts.turbopack,
rspack: opts.rspack,
disableGit: opts.disableGit,
})
} catch (reason) {
@@ -464,6 +466,7 @@ async function run(): Promise<void> {
skipInstall: opts.skipInstall,
empty: opts.empty,
turbopack: opts.turbopack,
rspack: opts.rspack,
disableGit: opts.disableGit,
})
}
@@ -44,6 +44,7 @@ export const installTemplate = async ({
importAlias,
skipInstall,
turbopack,
rspack,
}: InstallTemplateArgs) => {
console.log(bold(`Using ${packageManager}.`));
@@ -77,6 +78,21 @@ export const installTemplate = async ({
},
});
if (rspack) {
const nextConfigFile = path.join(
root,
mode === "js" ? "next.config.mjs" : "next.config.ts",
);
await fs.writeFile(
nextConfigFile,
`import withRspack from "next-rspack";\n\n` +
(await fs.readFile(nextConfigFile, "utf8")).replace(
"export default nextConfig;",
"export default withRspack(nextConfig);",
),
);
}
const tsconfigFile = path.join(
root,
mode === "js" ? "jsconfig.json" : "tsconfig.json",
@@ -188,6 +204,21 @@ export const installTemplate = async ({
devDependencies: {},
};
if (rspack) {
const NEXT_PRIVATE_TEST_VERSION = process.env.NEXT_PRIVATE_TEST_VERSION;
if (
NEXT_PRIVATE_TEST_VERSION &&
path.isAbsolute(NEXT_PRIVATE_TEST_VERSION)
) {
packageJson.dependencies["next-rspack"] = path.resolve(
path.dirname(NEXT_PRIVATE_TEST_VERSION),
"../next-rspack/next-rspack-packed.tgz",
);
} else {
packageJson.dependencies["next-rspack"] = version;
}
}
/**
* TypeScript projects will have type definitions and other devDependencies.
*/
@@ -31,4 +31,5 @@ export interface InstallTemplateArgs {
importAlias: string;
skipInstall: boolean;
turbopack: boolean;
rspack: boolean;
}
@@ -28,7 +28,12 @@ describe('create-next-app --example', () => {
await useTempDir(async (cwd) => {
const projectName = 'valid-example'
const res = await run(
[projectName, '--example', 'basic-css'],
[
projectName,
'--example',
'basic-css',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
cwd,
@@ -53,7 +58,12 @@ describe('create-next-app --example', () => {
await useTempDir(async (cwd) => {
const projectName = 'github-url'
const res = await run(
[projectName, '--example', FULL_EXAMPLE_PATH],
[
projectName,
'--example',
FULL_EXAMPLE_PATH,
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
cwd,
@@ -85,6 +95,7 @@ describe('create-next-app --example', () => {
// since vercel/examples is not a template repo, we use the following
// GH#39665
'https://github.com/vercel/nextjs-portfolio-starter/',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -119,6 +130,7 @@ describe('create-next-app --example', () => {
EXAMPLE_REPO,
'--example-path',
EXAMPLE_PATH,
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -154,6 +166,7 @@ describe('create-next-app --example', () => {
FULL_EXAMPLE_PATH,
'--example-path',
EXAMPLE_PATH,
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -192,6 +205,7 @@ describe('create-next-app --example', () => {
'--example',
'__internal-testing-retry',
'--import-alias=@/*',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -224,6 +238,7 @@ describe('create-next-app --example', () => {
'--example',
'default',
'--import-alias=@/*',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -245,7 +260,12 @@ describe('create-next-app --example', () => {
await useTempDir(async (cwd) => {
const projectName = 'invalid-example'
const res = await run(
[projectName, '--example', 'not a real example'],
[
projectName,
'--example',
'not a real example',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
cwd,
@@ -274,6 +294,7 @@ describe('create-next-app --example', () => {
'--no-src-dir',
'--no-tailwind',
'--example',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -39,6 +39,7 @@ describe('create-next-app', () => {
'--no-tailwind',
'--no-src-dir',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -80,6 +81,7 @@ describe('create-next-app', () => {
'--no-tailwind',
'--no-src-dir',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -111,6 +113,7 @@ describe('create-next-app', () => {
'--no-src-dir',
'--no-import-alias',
'--skip-install',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -30,7 +30,12 @@ export const projectSpecification: ProjectSpecification = {
'node_modules/next',
'.gitignore',
],
deps: ['next', 'react', 'react-dom'],
deps: [
'next',
'react',
'react-dom',
...(process.env.NEXT_RSPACK ? ['next-rspack'] : []),
],
// TODO: Remove @eslint/eslintrc once eslint-config-next is pure Flat config
devDeps: ['eslint', 'eslint-config-next', '@eslint/eslintrc'],
},
@@ -170,12 +175,12 @@ export const projectSpecification: ProjectSpecification = {
},
'app-api': {
js: {
deps: ['next'],
deps: ['next', ...(process.env.NEXT_RSPACK ? ['next-rspack'] : [])],
devDeps: [],
files: ['app/route.js', 'app/[slug]/route.js', 'jsconfig.json'],
},
ts: {
deps: ['next'],
deps: ['next', ...(process.env.NEXT_RSPACK ? ['next-rspack'] : [])],
devDeps: ['@types/node', '@types/react', 'typescript'],
files: [
'app/route.ts',
@@ -69,6 +69,7 @@ describe('create-next-app --api (Headless App)', () => {
'--no-turbopack',
'--no-src-dir',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -101,6 +102,7 @@ describe('create-next-app --api (Headless App)', () => {
'--no-turbopack',
'--no-src-dir',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -130,6 +132,7 @@ describe('create-next-app --api (Headless App)', () => {
'--no-turbopack',
'--src-dir',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -152,35 +155,39 @@ describe('create-next-app --api (Headless App)', () => {
})
})
})
;(process.env.NEXT_RSPACK ? it.skip : it)(
'should enable turbopack dev with --turbopack flag',
async () => {
await useTempDir(async (cwd) => {
const projectName = 'app-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--api',
'--turbopack',
'--no-src-dir',
'--no-import-alias',
],
nextTgzFilename,
{
cwd,
}
)
it('should enable turbopack dev with --turbopack flag', async () => {
await useTempDir(async (cwd) => {
const projectName = 'app-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--api',
'--turbopack',
'--no-src-dir',
'--no-import-alias',
],
nextTgzFilename,
{
// eslint-disable-next-line jest/no-standalone-expect
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
// eslint-disable-next-line jest/no-standalone-expect
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
await tryNextDev({
cwd,
}
)
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
await tryNextDev({
cwd,
isApi: true,
projectName,
isApi: true,
projectName,
})
})
})
})
}
)
})
@@ -35,6 +35,7 @@ describe('create-next-app --app (App Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -64,6 +65,7 @@ describe('create-next-app --app (App Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -91,6 +93,7 @@ describe('create-next-app --app (App Router)', () => {
'--src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -127,6 +130,7 @@ describe('create-next-app --app (App Router)', () => {
'--src-dir',
'--tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -163,6 +167,7 @@ describe('create-next-app --app (App Router)', () => {
'--empty',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -201,6 +206,7 @@ describe('create-next-app --app (App Router)', () => {
'--tailwind',
'--empty',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -224,31 +230,35 @@ describe('create-next-app --app (App Router)', () => {
})
})
})
;(process.env.NEXT_RSPACK ? it.skip : it)(
'should enable turbopack dev with --turbopack flag',
async () => {
await useTempDir(async (cwd) => {
const projectName = 'app-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--app',
'--eslint',
'--turbopack',
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
],
nextTgzFilename,
{
cwd,
}
)
it('should enable turbopack dev with --turbopack flag', async () => {
await useTempDir(async (cwd) => {
const projectName = 'app-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--app',
'--eslint',
'--turbopack',
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
],
nextTgzFilename,
{
cwd,
}
)
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
})
})
// eslint-disable-next-line jest/no-standalone-expect
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
// eslint-disable-next-line jest/no-standalone-expect
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
})
}
)
})
@@ -60,7 +60,11 @@ describe.each(['app', 'pages'] as const)(
await useTempDir(async (cwd) => {
const projectName = `cna-matrix-${pagesOrApp}-${id++}`
const { exitCode } = await run(
[projectName, ...flags],
[
projectName,
...flags,
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
cwd,
@@ -35,6 +35,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -69,6 +70,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -100,6 +102,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--src-dir',
'--no-tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -135,6 +138,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--src-dir',
'--tailwind',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -172,6 +176,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--no-tailwind',
'--empty',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -211,6 +216,7 @@ describe('create-next-app --no-app (Pages Router)', () => {
'--tailwind',
'--empty',
'--no-import-alias',
...(process.env.NEXT_RSPACK ? ['--rspack'] : []),
],
nextTgzFilename,
{
@@ -235,31 +241,35 @@ describe('create-next-app --no-app (Pages Router)', () => {
})
})
})
;(process.env.NEXT_RSPACK ? it.skip : it)(
'should enable turbopack dev with --turbopack flag',
async () => {
await useTempDir(async (cwd) => {
const projectName = 'pages-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--no-app',
'--eslint',
'--turbopack',
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
],
nextTgzFilename,
{
cwd,
}
)
it('should enable turbopack dev with --turbopack flag', async () => {
await useTempDir(async (cwd) => {
const projectName = 'pages-turbo'
const { exitCode } = await run(
[
projectName,
'--ts',
'--no-app',
'--eslint',
'--turbopack',
'--no-src-dir',
'--no-tailwind',
'--no-import-alias',
],
nextTgzFilename,
{
cwd,
}
)
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
})
})
// eslint-disable-next-line jest/no-standalone-expect
expect(exitCode).toBe(0)
const projectRoot = join(cwd, projectName)
const pkgJson = require(join(projectRoot, 'package.json'))
// eslint-disable-next-line jest/no-standalone-expect
expect(pkgJson.scripts.dev).toBe('next dev --turbopack')
})
}
)
})