From 5429e8f12e7bf54177ba68eafd65160017b90cde Mon Sep 17 00:00:00 2001 From: Aman Mittal Date: Wed, 6 Apr 2022 18:36:50 +0530 Subject: [PATCH] Update Manual Steps in Getting Started guide (#35898) This PR add necessary information to the Manual Section to add directories such as `pages` and `public`. ## Bug - [x] Related issues linked using fixes #29479 - [ ] Integration tests added - [ ] Errors have 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 helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `yarn lint` --- docs/getting-started.md | 33 ++++++++++++++++++++++----------- 1 file changed, 22 insertions(+), 11 deletions(-) diff --git a/docs/getting-started.md b/docs/getting-started.md index b1497555c9969fe..fb278f908e22994 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,21 @@ 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 `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: +Populate `pages/index.js` with the following contents: ```jsx function HomePage() { @@ -91,12 +96,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).