feat(create-next-app): let users create TS projects using prompt; enhance tests

docs/getting-started.md

@@ -19,7 +19,12 @@ If you have questions about anything related to Next.js, you're always welcome t
 
 ## Automatic Setup
 
-We recommend creating a new Next.js app using `create-next-app`, which sets up everything automatically for you. To create a project, run:
+We recommend creating a new Next.js app using `create-next-app`, which sets up
+everything automatically for you.
+
+### Interactive
+
+You can create a new project interactively by running:
 
 ```bash
 npx create-next-app@latest
@@ -29,14 +34,63 @@ yarn create next-app
 pnpm create next-app
 ```
 
-If you want to start with a TypeScript project you can use the `--typescript` flag:
+You will be asked for the name of your project, and then whether you want to
+create a TypeScript project:
+
+```
+✔ Would you like to use TypeScript with this project? … No / Yes
+```
+
+Select **Yes** to install the necessary types/dependencies and create a new TS project.
+
+### Non-interactive
+
+You can also pass command line arguments to set up a new project
+non-interactively. See `create-next-app --help`:
+
+```
+create-next-app <project-directory> [options]
+
+Options:
+  -V, --version                      output the version number
+  --ts, --typescript
+
+    Initialize as a TypeScript project. (default)
+
+  --js, --javascript
+
+    Initialize as a JavaScript project.
+
+  --use-npm
+
+    Explicitly tell the CLI to bootstrap the app using npm
+
+  --use-pnpm
+
+    Explicitly tell the CLI to bootstrap the app using pnpm
+
+  -e, --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 GitHub URL. The URL can use
+    any branch and/or subdirectory
+
+  --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
+```
+
+#### Examples
 
 ```bash
-npx create-next-app@latest --typescript
+npx create-next-app@latest --ts my-project
 # or
-yarn create next-app --typescript
+yarn create next-app --js my-project
 # or
-pnpm create next-app --typescript
+pnpm create next-app --javascript my-project
 ```
 
 After the installation is complete:

packages/create-next-app/create-app.ts

@@ -37,7 +37,7 @@ export async function createApp({
   typescript?: boolean
 }): Promise<void> {
   let repoInfo: RepoInfo | undefined
-  const template = typescript ? 'typescript' : 'default'
+  const template = !typescript ? 'javascript' : 'typescript'
 
   if (example) {
     let repoUrl: URL | undefined

packages/create-next-app/index.ts

@@ -23,7 +23,14 @@ const program = new Commander.Command(packageJson.name)
     '--ts, --typescript',
     `
 
-  Initialize as a TypeScript project.
+  Initialize as a TypeScript project. (default)
+`
+  )
+  .option(
+    '--js, --javascript',
+    `
+
+  Initialize as a JavaScript project.
 `
   )
   .option(
@@ -129,13 +136,49 @@ async function run(): Promise<void> {
     : getPkgManager()
 
   const example = typeof program.example === 'string' && program.example.trim()
+
+  /**
+   * If the user does not provide a --js or --ts flag set, ask them whether or
+   * not they'd like to use TypeScript.
+   */
+  if (!program.typescript && !program.javascript) {
+    const styledTypeScript = chalk.hex('#007acc')('TypeScript')
+    const { typescript } = await prompts(
+      {
+        type: 'toggle',
+        name: 'typescript',
+        message: `Would you like to use ${styledTypeScript} with this project?`,
+        initial: true,
+        active: 'Yes',
+        inactive: 'No',
+      },
+      {
+        /**
+         * User inputs Ctrl+C or Ctrl+D to exit the prompt. We should close the
+         * process and not write to the file system.
+         */
+        onCancel: () => {
+          console.error('Exiting.')
+          process.exit(1)
+        },
+      }
+    )
+
+    if (typescript) {
+      program.typescript = true
+    } else {
+      program.javascript = false
+      program.javascript = true
+    }
+  }
+
   try {
     await createApp({
       appPath: resolvedProjectPath,
       packageManager,
       example: example && example !== 'default' ? example : undefined,
       examplePath: program.examplePath,
-      typescript: program.typescript,
+      typescript: !program.javascript || program.typescript,
     })
   } catch (reason) {
     if (!(reason instanceof DownloadError)) {