Create Next App

Copy#!/usr/bin/env node
/* eslint-disable import/no-extraneous-dependencies */
import ciInfo from 'ci-info'
import { Command } from 'commander'
import Conf from 'conf'
import { existsSync } from 'node:fs'
import { basename, resolve } from 'node:path'
import { blue, bold, cyan, green, red, yellow } from 'picocolors'
import type { InitialReturnValue } from 'prompts'
import prompts from 'prompts'
import updateCheck from 'update-check'
import { createApp, DownloadError } from './create-app'
import type { PackageManager } from './helpers/get-pkg-manager'
import { getPkgManager } from './helpers/get-pkg-manager'
import { isFolderEmpty } from './helpers/is-folder-empty'
import { validateNpmName } from './helpers/validate-pkg'
import packageJson from './package.json'
import { Bundler } from './templates'
 
let projectPath: string = ''
 
const handleSigTerm = () => process.exit(0)
 
process.on('SIGINT', handleSigTerm)
process.on('SIGTERM', handleSigTerm)
 
const onPromptState = (state: {
  value: InitialReturnValue
  aborted: boolean
  exited: boolean
}) => {
  if (state.aborted) {
    // If we don't re-enable the terminal cursor before exiting
    // the program, the cursor will remain hidden
    process.stdout.write('\x1B[?25h')
    process.stdout.write('\n')
    process.exit(1)
  }
}

Copyconst program = new Command(packageJson.name)
  .version(
    packageJson.version,
    '-v, --version',
    'Output the current version of create-next-app.'
  )
  .argument('[directory]')
  .usage('[directory] [options]')
  .helpOption('-h, --help', 'Display this help message.')
  .option('--ts, --typescript', 'Initialize as a TypeScript project. (default)')
  .option('--js, --javascript', 'Initialize as a JavaScript project.')
  .option('--tailwind', 'Initialize with Tailwind CSS config. (default)')
  .option('--react-compiler', 'Initialize with React Compiler enabled.')
  .option('--cache-components', 'Initialize with Cache Components enabled.')
  .option('--eslint', 'Initialize with ESLint config.')
  .option('--biome', 'Initialize with Biome config.')
  .option('--app', 'Initialize as an App Router project.')
  .option('--src-dir', "Initialize inside a 'src/' directory.")
  .option('--rspack', 'Enable Rspack as the bundler.')
  .option(
    '--import-alias <prefix/*>',
    'Specify import alias to use (default "@/*").'
  )
  .option('--api', 'Initialize a headless API using the App Router.')
  .option('--empty', 'Initialize an empty project.')
  .option(
    '--use-npm',
    'Explicitly tell the CLI to bootstrap the application using npm.'
  )
  .option(
    '--use-pnpm',
    'Explicitly tell the CLI to bootstrap the application using pnpm.'
  )
  .option(
    '--use-yarn',
    'Explicitly tell the CLI to bootstrap the application using Yarn.'
  )
  .option(
    '--use-bun',
    'Explicitly tell the CLI to bootstrap the application using Bun.'
  )
  .option(
    '--reset, --reset-preferences',
    'Reset the preferences saved for create-next-app.'
  )
  .option(
    '--skip-install',
    'Explicitly tell the CLI to skip installing packages.'
  )
  .option('--yes', 'Use saved preferences or defaults for unprovided options.')
  .option(
    '-e, --example <example-name|github-url>',
    `
 
  An example to bootstrap the app with. You can use an example name
  from the official Next.js repo or a public GitHub URL. The URL can use
  any branch and/or subdirectory.
`
  )
  .option(
    '--example-path <path-to-example>',
    `
 
  In a rare case, your GitHub URL might contain a branch name with
  a slash (e.g. bug/fix-1) and the path to the example (e.g. foo/bar).
  In this case, you must specify the path to the example separately:
  --example-path foo/bar
`
  )
  .option(
    '--agents-md',
    'Include AGENTS.md to guide coding agents to write up-to-date Next.js code. (default)'
  )
  .option(
    '--agent-feedback',
    'Prepare anonymized Next.js feedback for your review.'
  )
  .option(
    '--no-agent-feedback',
    'Do not prepare anonymized Next.js feedback for your review.'

Copy.action((name) => {
  // Commander does not implicitly support negated options. When they are used
  // by the user they will be interpreted as the positional argument (name) in
  // the action handler. See https://github.com/tj/commander.js/pull/1355
  if (name && !name.startsWith('--no-')) {
    projectPath = name
  }
})

Copyconst packageManager: PackageManager = !!opts.useNpm
  ? 'npm'
  : !!opts.usePnpm
    ? 'pnpm'
    : !!opts.useYarn
      ? 'yarn'
      : !!opts.useBun
        ? 'bun'
        : getPkgManager()
 

Copyasync function run(): Promise<void> {
  const conf = new Conf({ projectName: 'create-next-app' })
 
  if (opts.resetPreferences) {
    const { resetPreferences } = await prompts({
      onState: onPromptState,
      type: 'toggle',
      name: 'resetPreferences',
      message: 'Would you like to reset the saved preferences?',
      initial: false,
      active: 'Yes',
      inactive: 'No',
    })
    if (resetPreferences) {
      conf.clear()
      console.log('The preferences have been reset successfully!')
    }
    process.exit(0)
  }

Copyif (typeof projectPath === 'string') {
  projectPath = projectPath.trim()
}
 
if (!projectPath) {
  const res = await prompts({
    onState: onPromptState,
    type: 'text',
    name: 'path',
    message: 'What is your project named?',
    initial: 'my-app',
    validate: (name) => {
      const validation = validateNpmName(basename(resolve(name)))
      if (validation.valid) {
        return true
      }
      return 'Invalid project name: ' + validation.problems[0]
    },
  })
 
  if (typeof res.path === 'string') {
    projectPath = res.path.trim()
  }
}

Copyexport function validateNpmName(name: string): ValidateNpmNameResult {
  const nameValidation = validateProjectName(name)
  if (nameValidation.validForNewPackages) {
    return { valid: true }
  }
 
  return {
    valid: false,
    problems: [
      ...(nameValidation.errors || []),
      ...(nameValidation.warnings || []),
    ],
  }
}

Copyexport function validateNpmName(name: string): ValidateNpmNameResult {
  const nameValidation = validateProjectName(name)
  if (nameValidation.validForNewPackages) {
    return { valid: true }
  }
 
  return {
    valid: false,
    problems: [
      ...(nameValidation.errors || []),
      ...(nameValidation.warnings || []),
    ],
  }
}

Copyif (!projectPath) {
  console.log(
    '\nPlease specify the project directory:\n' +
      `  ${cyan(opts.name())} ${green('<project-directory>')}\n` +
      'For example:\n' +
      `  ${cyan(opts.name())} ${green('my-next-app')}\n\n` +
      `Run ${cyan(`${opts.name()} --help`)} to see all options.`
  )
  process.exit(1)
}

Copyexport async function isWriteable(directory: string): Promise<boolean> {
  try {
    await access(directory, W_OK)
    return true
  } catch (err) {
    return false
  }
}

Copyif (conflicts.length > 0) {
  console.log(
    `The directory ${green(name)} contains files that could conflict:`
  )
  console.log()
  for (const file of conflicts) {
    try {
      const stats = lstatSync(join(root, file))
      if (stats.isDirectory()) {
        console.log(`  ${blue(file)}/`)
      } else {
        console.log(`  ${file}`)
      }
    } catch {
      console.log(`  ${file}`)
    }
  }
  console.log()
  console.log(
    'Either try using a new directory name, or remove the files listed above.'
  )
  console.log()
  return false
}

Copy  const mode: TemplateMode = typescript ? 'ts' : 'js'
  const template: TemplateType = `${app ? 'app' : 'default'}${tailwind ? '-tw' : ''}${empty ? '-empty' : ''}`

Copyrename(name) {
  switch (name) {
    case "gitignore": {
      return `.${name}`;
    }
    // README.md is ignored by webpack-asset-relocator-loader used by ncc:
    // https://github.com/vercel/webpack-asset-relocator-loader/blob/e9308683d47ff507253e37c9bcbb99474603192b/src/asset-relocator.js#L227
    case "README-template.md": {
      return "README.md";
    }
    default: {
      return name;
    }
  }
},

Copyif (bundler === Bundler.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);",
      ),
  );
}

Copyif (cacheComponents) {
  const nextConfigFile = path.join(
    root,
    mode === "js" ? "next.config.mjs" : "next.config.ts",
  );
  let configContent = await fs.readFile(nextConfigFile, "utf8");
 
  // `partialPrefetching` is enabled alongside `cacheComponents` because the
  // only reason to disable it is when adopting `cacheComponents` from before
  // the option existed.
  configContent = configContent.replace(
    "/* config options here */\n",
    "/* config options here */\n  cacheComponents: true,\n  partialPrefetching: true,\n",
  );
 
  await fs.writeFile(nextConfigFile, configContent);
}

Copyexport const SRC_DIR_NAMES = ["app", "pages", "styles"];

Copyif (srcDir) {
  await fs.mkdir(path.join(root, "src"), { recursive: true });
  await Promise.all(
    SRC_DIR_NAMES.map(async (file) => {
      await fs
        .rename(path.join(root, file), path.join(root, "src", file))
        .catch((err) => {
          if (err.code !== "ENOENT") {
            throw err;
          }
        });
    }),
  );
 

Copyif (importAlias !== "@/*") {
  const files = await glob("**/*", {
    cwd: root,
    dot: true,
    stats: false,
    // We don't want to modify compiler options in [ts/js]config.json
    // and none of the files in the .git folder
    // TODO: Refactor this to be an allowlist, rather than a denylist,
    // to avoid corrupting files that weren't intended to be replaced
 
    ignore: [
      "tsconfig.json",
      "jsconfig.json",
      ".git/**/*",
      "**/fonts/**",
      "**/favicon.ico",
    ],
  });
  const writeSema = new Sema(8, { capacity: files.length });
  await Promise.all(
    files.map(async (file) => {
      await writeSema.acquire();
      const filePath = path.join(root, file);
      if ((await fs.stat(filePath)).isFile()) {
        await fs.writeFile(
          filePath,
          (await fs.readFile(filePath, "utf8")).replace(
            `@/`,
            `${importAlias.replace(/\*/g, "")}`,
          ),
        );
      }
      writeSema.release();
    }),
  );
}

Copyexport async function getRepoInfo(
  url: URL,
  examplePath?: string
): Promise<RepoInfo | undefined> {
  const [, username, name, t, _branch, ...file] = url.pathname.split('/')
  const filePath = examplePath ? examplePath.replace(/^\//, '') : file.join('/')
 
  if (
    // Support repos whose entire purpose is to be a Next.js example, e.g.
    // https://github.com/:username/:my-cool-nextjs-example-repo-name.
    t === undefined ||
    // Support GitHub URL that ends with a trailing slash, e.g.
    // https://github.com/:username/:my-cool-nextjs-example-repo-name/
    // In this case "t" will be an empty string while the next part "_branch" will be undefined
    (t === '' && _branch === undefined)
  ) {
    try {
      const infoResponse = await fetch(
        `https://api.github.com/repos/${username}/${name}`
      )
      if (infoResponse.status !== 200) {
        return
      }
 
      const info = await infoResponse.json()
      return { username, name, branch: info['default_branch'], filePath }
    } catch {
      return
    }
  }
 
  // If examplePath is available, the branch name takes the entire path
  const branch = examplePath
    ? `${_branch}/${file.join('/')}`.replace(new RegExp(`/${filePath}|/$`), '')
    : _branch
 
  if (username && name && branch && t === 'tree') {
    return { username, name, branch, filePath }
  }
}

Copyexport type RepoInfo = {
  username: string
  name: string
  branch: string
  filePath: string
}

Copyif (repoUrl) {
  if (repoUrl.origin !== 'https://github.com') {
    console.error(
      `Invalid URL: ${red(
        `"${example}"`
      )}. Only GitHub repositories are supported. Please use a GitHub URL and try again.`
    )
    process.exit(1)
  }
 

Copyexport function hasRepo({
  username,
  name,
  branch,
  filePath,
}: RepoInfo): Promise<boolean> {
  // Avoid GitHub's low unauthenticated API rate limit. create-next-app only
  // needs to verify that the example's package.json can be downloaded.
  const packagePath = `${filePath ? `${filePath}/` : ''}package.json`
 
  return isUrlOk(
    `https://raw.githubusercontent.com/${username}/${name}/${branch}/${packagePath}`
  )
}

Copyexport function existsInRepo(nameOrUrl: string): Promise<boolean> {
  try {
    const url = new URL(nameOrUrl)
    return isUrlOk(url.href)
  } catch {
    return isUrlOk(
      `https://api.github.com/repos/vercel/next.js/contents/examples/${encodeURIComponent(
        nameOrUrl
      )}`
    )
  }
}

Copyasync function downloadTarStream(url: string) {
  const res = await fetch(url)
 
  if (!res.body) {
    throw new Error(`Failed to download: ${url}`)
  }
 
  return Readable.fromWeb(res.body as import('stream/web').ReadableStream)
}

Copyexport async function downloadAndExtractRepo(
  root: string,
  { username, name, branch, filePath }: RepoInfo
) {
  let rootPath: string | null = null
  await pipeline(
    await downloadTarStream(
      `https://codeload.github.com/${username}/${name}/tar.gz/${branch}`
    ),
    x({
      cwd: root,
      strip: filePath ? filePath.split('/').length + 1 : 1,
      filter: (p: string) => {
        // Convert Windows path separators to POSIX style
        const posixPath = p.split(sep).join(posix.sep)
 
        // Determine the unpacked root path dynamically instead of hardcoding to the fetched repo's name / branch.
        // This avoids the condition when the repository has been renamed, and the old repository name is used to fetch the example.
        // The tar download will work as it is redirected automatically, but the root directory of the extracted
        // example will be the new, renamed name instead of the name used to fetch the example, breaking the filter.
        if (rootPath === null) {
          const pathSegments = posixPath.split(posix.sep)
          rootPath = pathSegments.length ? pathSegments[0] : null
        }
 
        return posixPath.startsWith(
          `${rootPath}${filePath ? `/${filePath}/` : '/'}`
        )
      },
    })
  )
}

Copyexport async function downloadAndExtractExample(root: string, name: string) {
  if (name === '__internal-testing-retry') {
    throw new Error('This is an internal example for testing the CLI.')
  }
 
  await pipeline(
    await downloadTarStream(
      'https://codeload.github.com/vercel/next.js/tar.gz/canary'
    ),
    x({
      cwd: root,
      strip: 2 + name.split('/').length,
      filter: (p) => p.includes(`next.js-canary/examples/${name}/`),
    })
  )
}

Copyexport type PackageManager = 'npm' | 'pnpm' | 'yarn' | 'bun'
 
export function getPkgManager(): PackageManager {
  const userAgent = process.env.npm_config_user_agent || ''
 
  if (userAgent.startsWith('yarn')) {
    return 'yarn'
  }
 
  if (userAgent.startsWith('pnpm')) {
    return 'pnpm'
  }
 
  if (userAgent.startsWith('bun')) {
    return 'bun'
  }
 
  return 'npm'
}

Copyexport function getPackageManagerVersion(
  packageManager: PackageManager
): string | null {
  const userAgent = process.env.npm_config_user_agent || ''
  const userAgentMatch = userAgent.match(
    new RegExp(`${packageManager}/([\\d.]+[\\w.-]*)`)
  )
  if (userAgentMatch) {
    return userAgentMatch[1]
  }
 
  try {
    const version = execSync(`${packageManager} --version`, {
      encoding: 'utf8',
      stdio: ['pipe', 'pipe', 'ignore'],
    }).trim()
    if (/^\d+\.\d+\.\d+/.test(version)) {
      return version
    }
  } catch {
    // package manager not available or failed to run
  }
 
  return null
}

Copyexport function getPnpmMajorVersion(): number | null {
  const version = getPackageManagerVersion('pnpm')
  if (!version) return null
  const major = parseInt(version.split('.')[0], 10)
  return Number.isNaN(major) ? null : major
}

Copyexport async function install(
  /** Indicate which package manager to use. */
  packageManager: PackageManager,
  /** Indicate whether there is an active Internet connection.*/
  isOnline: boolean
): Promise<void> {
  const args: string[] = ['install']
  if (!isOnline) {
    console.log(
      yellow('You appear to be offline.\nFalling back to the local cache.')
    )
    args.push('--offline')
  }

Copyconst child = spawn(packageManager, args, {
  stdio: 'inherit',
  env: {
    ...process.env,
    ADBLOCK: '1',
    // we set NODE_ENV to development as pnpm skips dev
    // dependencies when production
    NODE_ENV: 'development',
    DISABLE_OPENCOLLECTIVE: '1',
  },
})

Copychild.on('close', (code) => {
  if (code !== 0) {
    reject({ command: `${packageManager} ${args.join(' ')}` })
    return
  }
  resolve()
})

Copy  try {
    console.log()
    await runTypegen(packageManager)
    console.log()
  } catch (err) {
    // Best effort: do not fail app creation if typegen fails
    console.error('Error running typegen:', err)
  }
}

Copyfunction isInGitRepository(): boolean {
  try {
    execSync('git rev-parse --is-inside-work-tree', { stdio: 'ignore' })
    return true
  } catch (_) {}
  return false
}
 
function isInMercurialRepository(): boolean {
  try {
    execSync('hg --cwd . root', { stdio: 'ignore' })
    return true
  } catch (_) {}
  return false
}

Copyif (isInGitRepository() || isInMercurialRepository()) {
  return false
}

Copyfunction isDefaultBranchSet(): boolean {
  try {
    execSync('git config init.defaultBranch', { stdio: 'ignore' })
    return true
  } catch (_) {}
  return false
}
 
export function tryGitInit(root: string): boolean {
  let didInit = false
  try {
    execSync('git --version', { stdio: 'ignore' })
    if (isInGitRepository() || isInMercurialRepository()) {
      return false
    }
 
    execSync('git init', { stdio: 'ignore' })
    didInit = true
 
    if (!isDefaultBranchSet()) {
      execSync('git checkout -b main', { stdio: 'ignore' })
    }

Copy  execSync('git add -A', { stdio: 'ignore' })
  execSync('git commit -m "Initial commit from Create Next App"', {
    stdio: 'ignore',
  })
  return true
} catch (e) {
  if (didInit) {
    try {
      rmSync(join(root, '.git'), { recursive: true, force: true })
    } catch (_) {}
  }
  return false
}

Copylet cdpath: string
if (join(originalDirectory, appName) === appPath) {
  cdpath = appName
} else {
  cdpath = appPath
}
 
console.log(`${green('Success!')} Created ${appName} at ${appPath}`)
 
if (hasPackageJson) {
  console.log('Inside that directory, you can run several commands:')
  console.log()
  console.log(cyan(`  ${packageManager} ${useYarn ? '' : 'run '}dev`))
  console.log('    Starts the development server.')
  console.log()
  console.log(cyan(`  ${packageManager} ${useYarn ? '' : 'run '}build`))
  console.log('    Builds the app for production.')
  console.log()
  console.log(cyan(`  ${packageManager} start`))
  console.log('    Runs the built app in production mode.')
  console.log()
  console.log('We suggest that you begin by typing:')
  console.log()
  console.log(cyan('  cd'), cdpath)
  console.log(`  ${cyan(`${packageManager} ${useYarn ? '' : 'run '}dev`)}`)
}