Skip to content

Latest commit

 

History

History
191 lines (132 loc) · 6.05 KB

getting-started.md

File metadata and controls

191 lines (132 loc) · 6.05 KB
Raw
description
Get started with Next.js in the official documentation, and learn more about all our features!

Getting Started

Welcome to the Next.js documentation!

If you're new to Next.js, we recommend starting with the learn course.

The interactive course with quizzes will guide you through everything you need to know to use Next.js.

If you have questions about anything related to Next.js, you're always welcome to ask our community on GitHub Discussions.

System Requirements

  • Node.js 12.22.0 or later
  • MacOS, Windows (including WSL), and Linux are supported

Automatic Setup

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:

npx create-next-app@latest
# or
yarn create next-app
# or
pnpm create next-app

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

npx create-next-app@latest --ts my-project
# or
yarn create next-app --js my-project
# or
pnpm create next-app --javascript my-project

After the installation 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

For more information on how to use create-next-app, you can review the create-next-app documentation.

Manual Setup

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:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start",
  "lint": "next lint"
}

These scripts refer to the different stages of developing an application:

  • dev - Runs next dev to start Next.js in development mode
  • build - Runs next build to build the application for production usage
  • start - Runs next start to start a Next.js production server
  • lint - Runs next lint to set up Next.js' built-in ESLint configuration

Create two directories pages and public at the root of your application:

  • 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 (/).

Next.js is built around the concept of pages. A page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. You can even add dynamic route parameters with the filename.

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:

function HomePage() {
  return <div>Welcome to Next.js!</div>
}

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:

In addition, any Next.js application is ready for production from the start. Read more in our Deployment documentation.

Related

For more information on what to do next, we recommend the following sections: