From d3c5abec59fe9b7858e3634953870b364d6a71e5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bal=C3=A1zs=20Orb=C3=A1n?= Date: Sat, 22 Oct 2022 23:18:39 +0200 Subject: [PATCH] feat(cna): add template (#41660) Adds a new template for `app/` via `--experimental-app` flag. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper --- packages/create-next-app/create-app.ts | 14 +++++--- packages/create-next-app/index.ts | 9 +++++ .../experimental-app/README-template.md | 34 ++++++++++++++++++ .../templates/experimental-app/app/layout.tsx | 10 ++++++ .../templates/experimental-app/app/page.tsx | 7 ++++ .../templates/experimental-app/eslintrc.json | 3 ++ .../templates/experimental-app/gitignore | 36 +++++++++++++++++++ .../templates/experimental-app/next-env.d.ts | 5 +++ .../templates/experimental-app/next.config.js | 8 +++++ .../experimental-app/pages/api/hello.ts | 13 +++++++ .../templates/experimental-app/tsconfig.json | 25 +++++++++++++ .../templates/typescript/pages/_app.tsx | 4 +-- .../templates/typescript/pages/index.tsx | 5 +-- 13 files changed, 162 insertions(+), 11 deletions(-) create mode 100644 packages/create-next-app/templates/experimental-app/README-template.md create mode 100644 packages/create-next-app/templates/experimental-app/app/layout.tsx create mode 100644 packages/create-next-app/templates/experimental-app/app/page.tsx create mode 100644 packages/create-next-app/templates/experimental-app/eslintrc.json create mode 100644 packages/create-next-app/templates/experimental-app/gitignore create mode 100644 packages/create-next-app/templates/experimental-app/next-env.d.ts create mode 100644 packages/create-next-app/templates/experimental-app/next.config.js create mode 100644 packages/create-next-app/templates/experimental-app/pages/api/hello.ts create mode 100644 packages/create-next-app/templates/experimental-app/tsconfig.json diff --git a/packages/create-next-app/create-app.ts b/packages/create-next-app/create-app.ts index 67011c80be4b8..c7812759b6222 100644 --- a/packages/create-next-app/create-app.ts +++ b/packages/create-next-app/create-app.ts @@ -29,15 +29,21 @@ export async function createApp({ example, examplePath, typescript, + experimentalApp, }: { appPath: string packageManager: PackageManager example?: string examplePath?: string - typescript?: boolean + typescript: boolean + experimentalApp: boolean }): Promise { let repoInfo: RepoInfo | undefined - const template = typescript ? 'typescript' : 'default' + const template = experimentalApp + ? 'experimental-app' + : typescript + ? 'typescript' + : 'default' if (example) { let repoUrl: URL | undefined @@ -238,7 +244,7 @@ export async function createApp({ /** * TypeScript projects will have type definitions and other devDependencies. */ - if (typescript) { + if (template !== 'default') { devDependencies.push( 'typescript', '@types/react', @@ -273,7 +279,7 @@ export async function createApp({ const devInstallFlags = { devDependencies: true, ...installFlags } await install(root, devDependencies, devInstallFlags) } - console.log() + console.log('\nInitializing project with template: ', template, '\n') /** * Copy the template files to the target directory. */ diff --git a/packages/create-next-app/index.ts b/packages/create-next-app/index.ts index 6a1c6e61f53db..13fffa432cb95 100644 --- a/packages/create-next-app/index.ts +++ b/packages/create-next-app/index.ts @@ -24,6 +24,13 @@ const program = new Commander.Command(packageJson.name) ` Initialize as a TypeScript project. +` + ) + .option( + '--experimental-app', + ` + + Initialize as a \`app/\` directory project. ` ) .option( @@ -136,6 +143,7 @@ async function run(): Promise { example: example && example !== 'default' ? example : undefined, examplePath: program.examplePath, typescript: program.typescript, + experimentalApp: program.experimentalApp, }) } catch (reason) { if (!(reason instanceof DownloadError)) { @@ -158,6 +166,7 @@ async function run(): Promise { appPath: resolvedProjectPath, packageManager, typescript: program.typescript, + experimentalApp: program.experimentalApp, }) } } diff --git a/packages/create-next-app/templates/experimental-app/README-template.md b/packages/create-next-app/templates/experimental-app/README-template.md new file mode 100644 index 0000000000000..331172e45f6d0 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/README-template.md @@ -0,0 +1,34 @@ +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/packages/create-next-app/templates/experimental-app/app/layout.tsx b/packages/create-next-app/templates/experimental-app/app/layout.tsx new file mode 100644 index 0000000000000..858c345c77954 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/app/layout.tsx @@ -0,0 +1,10 @@ +export default function RootLayout({ children }) { + return ( + + + Create Next App + + {children} + + ) +} diff --git a/packages/create-next-app/templates/experimental-app/app/page.tsx b/packages/create-next-app/templates/experimental-app/app/page.tsx new file mode 100644 index 0000000000000..b9e0c47294cc0 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/app/page.tsx @@ -0,0 +1,7 @@ +export default function Page() { + return ( +

+ Welcome to Next.js! +

+ ) +} diff --git a/packages/create-next-app/templates/experimental-app/eslintrc.json b/packages/create-next-app/templates/experimental-app/eslintrc.json new file mode 100644 index 0000000000000..bffb357a71225 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/packages/create-next-app/templates/experimental-app/gitignore b/packages/create-next-app/templates/experimental-app/gitignore new file mode 100644 index 0000000000000..c87c9b392c020 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/gitignore @@ -0,0 +1,36 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo +next-env.d.ts diff --git a/packages/create-next-app/templates/experimental-app/next-env.d.ts b/packages/create-next-app/templates/experimental-app/next-env.d.ts new file mode 100644 index 0000000000000..4f11a03dc6cc3 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/packages/create-next-app/templates/experimental-app/next.config.js b/packages/create-next-app/templates/experimental-app/next.config.js new file mode 100644 index 0000000000000..dafb0c88e961e --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/next.config.js @@ -0,0 +1,8 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + experimental: { + appDir: true, + }, +} + +module.exports = nextConfig diff --git a/packages/create-next-app/templates/experimental-app/pages/api/hello.ts b/packages/create-next-app/templates/experimental-app/pages/api/hello.ts new file mode 100644 index 0000000000000..f8bcc7e5caed1 --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/pages/api/hello.ts @@ -0,0 +1,13 @@ +// Next.js API route support: https://nextjs.org/docs/api-routes/introduction +import type { NextApiRequest, NextApiResponse } from 'next' + +type Data = { + name: string +} + +export default function handler( + req: NextApiRequest, + res: NextApiResponse +) { + res.status(200).json({ name: 'John Doe' }) +} diff --git a/packages/create-next-app/templates/experimental-app/tsconfig.json b/packages/create-next-app/templates/experimental-app/tsconfig.json new file mode 100644 index 0000000000000..6ef5cd577f6ed --- /dev/null +++ b/packages/create-next-app/templates/experimental-app/tsconfig.json @@ -0,0 +1,25 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true, + "plugins": [ + { + "name": "next" + } + ] + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], + "exclude": ["node_modules"] +} diff --git a/packages/create-next-app/templates/typescript/pages/_app.tsx b/packages/create-next-app/templates/typescript/pages/_app.tsx index 3f5c9d5485860..c055f25c20967 100644 --- a/packages/create-next-app/templates/typescript/pages/_app.tsx +++ b/packages/create-next-app/templates/typescript/pages/_app.tsx @@ -1,8 +1,6 @@ import '../styles/globals.css' import type { AppProps } from 'next/app' -function MyApp({ Component, pageProps }: AppProps) { +export default function App({ Component, pageProps }: AppProps) { return } - -export default MyApp diff --git a/packages/create-next-app/templates/typescript/pages/index.tsx b/packages/create-next-app/templates/typescript/pages/index.tsx index ff4dd21141cf2..cdffa57ca8254 100644 --- a/packages/create-next-app/templates/typescript/pages/index.tsx +++ b/packages/create-next-app/templates/typescript/pages/index.tsx @@ -1,9 +1,8 @@ -import type { NextPage } from 'next' import Head from 'next/head' import Image from 'next/image' import styles from '../styles/Home.module.css' -const Home: NextPage = () => { +export default function Home() { return (
@@ -70,5 +69,3 @@ const Home: NextPage = () => {
) } - -export default Home