diff --git a/examples/hello-world-esm/.gitignore b/examples/hello-world-esm/.gitignore new file mode 100644 index 000000000000000..1437c53f70bc211 --- /dev/null +++ b/examples/hello-world-esm/.gitignore @@ -0,0 +1,34 @@ +# 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* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel diff --git a/examples/hello-world-esm/README.md b/examples/hello-world-esm/README.md new file mode 100644 index 000000000000000..4a9755ba2230248 --- /dev/null +++ b/examples/hello-world-esm/README.md @@ -0,0 +1,23 @@ +# ESM Hello World example + +This example shows the most basic idea behind Next.js, and it's running on native [esm](https://nodejs.org/api/esm.html) mode. We have 2 pages: `pages/index.js` and `pages/about.js`. The former responds to `/` requests and the latter to `/about`. Using `next/link` you can add hyperlinks between them with universal routing capabilities. The `day` directory shows that you can have subdirectories. + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example-esm) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/hello-world-esm) + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/hello-world-esm&project-name=hello-world-esm&repository-name=hello-world-esm) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example hello-world-esm hello-world-esm-app +# or +yarn create next-app --example hello-world-esm hello-world-esm-app +# or +pnpm create next-app -- --example hello-world-esm hello-world-esm-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/examples/hello-world-esm/package.json b/examples/hello-world-esm/package.json new file mode 100644 index 000000000000000..4611e0b34c614ec --- /dev/null +++ b/examples/hello-world-esm/package.json @@ -0,0 +1,14 @@ +{ + "private": true, + "type": "module", + "scripts": { + "dev": "next", + "build": "next build", + "start": "next start" + }, + "dependencies": { + "next": "latest", + "react": "^18.0.0", + "react-dom": "^18.0.0" + } +} diff --git a/examples/hello-world-esm/pages/about.js b/examples/hello-world-esm/pages/about.js new file mode 100644 index 000000000000000..71c7703a7bd2acf --- /dev/null +++ b/examples/hello-world-esm/pages/about.js @@ -0,0 +1,3 @@ +export default function AboutPage() { + return