From ea75926973c4252bf92a4d38fac157b068698696 Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Tue, 5 Apr 2022 15:14:56 +0530 Subject: [PATCH 1/2] Update Manual Steps in Getting Started guide --- docs/getting-started.md | 35 ++++++++++++++++++++++++----------- 1 file changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index b1497555c9969fe..730eedb5db18d40 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -41,7 +41,7 @@ pnpm create next-app -- --typescript After the installation is complete: -- Run `npm run dev` or `yarn dev` to start the development server on `http://localhost:3000` +- Run `npm run dev` or `yarn dev` or `pnpm dev` to start the development server on `http://localhost:3000` - Visit `http://localhost:3000` to view your application - Edit `pages/index.js` and see the updated result in your browser @@ -55,6 +55,8 @@ Install `next`, `react` and `react-dom` in your project: npm install next react react-dom # or yarn add next react react-dom +# or +pnpm add next react react-dom ``` Open `package.json` and add the following `scripts`: @@ -70,18 +72,23 @@ Open `package.json` and add the following `scripts`: These scripts refer to the different stages of developing an application: -- `dev` - Runs [`next dev`](/docs/api-reference/cli.md#development) which starts Next.js in development mode -- `build` - Runs [`next build`](/docs/api-reference/cli.md#build) which builds the application for production usage -- `start` - Runs [`next start`](/docs/api-reference/cli.md#production) which starts a Next.js production server -- `lint` - Runs [`next lint`](/docs/api-reference/cli.md#lint) which sets up Next.js' built-in ESLint configuration +- `dev` - Runs [`next dev`](/docs/api-reference/cli.md#development) to start Next.js in development mode +- `build` - Runs [`next build`](/docs/api-reference/cli.md#build) to build the application for production usage +- `start` - Runs [`next start`](/docs/api-reference/cli.md#production) to start a Next.js production server +- `lint` - Runs [`next lint`](/docs/api-reference/cli.md#lint) to set up Next.js' built-in ESLint configuration + +Create two directories `pages` and `public` at the root of your application: -Next.js is built around the concept of [pages](/docs/basic-features/pages.md). A page is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. +- `pages` - Associated with a route based on their file name. For example `pages/about.js` is mapped to `/about` +- `public` - Stores static assets such as images, fonts, etc. Files inside `public` directory can then be referenced by your code starting from the base URL (`/`). -Pages are associated with a route based on their file name. For example `pages/about.js` is mapped to `/about`. You can even add dynamic route parameters with the filename. +Next.js is built around the concept of [pages](/docs/basic-features/pages.md). A page is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. You can even add [dynamic route](/docs/routing/dynamic-routes) parameters with the filename. -Create a `pages` directory inside your project. +Inside the `pages` directory add the following file to get started: -Populate `./pages/index.js` with the following contents: +- `index.js` - This is the page that is rendered when the user visits the root of your application + +Populate `pages/index.js` with the following contents: ```jsx function HomePage() { @@ -91,12 +98,18 @@ function HomePage() { export default HomePage ``` +After the set up is complete: + +- Run `npm run dev` or `yarn dev` or `pnpm dev` to start the development server on `http://localhost:3000` +- Visit `http://localhost:3000` to view your application +- Edit `pages/index.js` and see the updated result in your browser + So far, we get: - Automatic compilation and [bundling](/docs/advanced-features/compiler.md) - [React Fast Refresh](https://nextjs.org/blog/next-9-4#fast-refresh) -- [Static generation and server-side rendering](/docs/basic-features/data-fetching/overview.md) of [`./pages/`](/docs/basic-features/pages.md) -- [Static file serving](/docs/basic-features/static-file-serving.md). `./public/` is mapped to `/` +- [Static generation and server-side rendering](/docs/basic-features/data-fetching/overview.md) of [`pages/`](/docs/basic-features/pages.md) +- [Static file serving](/docs/basic-features/static-file-serving.md) through `public/` which is mapped to the base URL (`/`) In addition, any Next.js application is ready for production from the start. Read more in our [Deployment documentation](/docs/deployment.md). From 38a70d196361c3cd3af6f97a316fcd6a09a3a71a Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Wed, 6 Apr 2022 11:37:03 +0530 Subject: [PATCH 2/2] Remove bullet point --- docs/getting-started.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index 730eedb5db18d40..fb278f908e22994 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -84,9 +84,7 @@ Create two directories `pages` and `public` at the root of your application: Next.js is built around the concept of [pages](/docs/basic-features/pages.md). A page is a [React Component](https://reactjs.org/docs/components-and-props.html) exported from a `.js`, `.jsx`, `.ts`, or `.tsx` file in the `pages` directory. You can even add [dynamic route](/docs/routing/dynamic-routes) parameters with the filename. -Inside the `pages` directory add the following file to get started: - -- `index.js` - This is the page that is rendered when the user visits the root of your application +Inside the `pages` directory add the `index.js` file to get started. This is the page that is rendered when the user visits the root of your application Populate `pages/index.js` with the following contents: