Sebastian Gomez

Apr 12, 2023

Updated: Jun 25, 2026

Getting Started with Next.js

Want to learn how to get started with Next.js? Look no further! In this post you'll learn two different ways to start with this powerful framework and how to configure the scripts you need in your package.json file. Let's dive in!

The easiest way: using create-next-app

Just like there's an NPM tool to start a React project (create-react-app), there's one for Next.js too: create-next-app. You no longer need to install it globally; the recommended approach is to run it with npx, which always downloads the latest version:

# With npx (recommended)
$ npx create-next-app@latest

# Or with Yarn
$ yarn create next-app

This will create a sample application (a boilerplate) with all the required dependencies and, in your package.json, all the scripts already configured and ready to use.

What `create-next-app` generates today (Next.js 16): The wizard will prompt you and, by default, set up the App Router (the app/ folder), TypeScript, ESLint, and Turbopack. In other words, you get a much more complete and modern project than the bare minimum we'll build by hand in the next section.

The other easy way: building your project from scratch

You can create your project folder and initialize it as an empty npm project:

$ npm init -y

Then install the three required dependencies:

• React (of course)
• React DOM (also of course)
• Next.js (yes, Next is actually an npm package)

# With npm
$ npm install next react react-dom

# With Yarn
$ yarn add next react react-dom

Next, add the scripts you need to your package.json:

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

What do these commands do?

• dev: runs Next.js in development mode. (Note: the script must be next dev; the old "dev": "next" no longer starts the dev server.)
• build: creates an optimized production build of your application.
• start: starts the production server.
• lint: runs Next.js's linter.

To finish this manual path, create a minimal app/page.tsx file:

export default function Home() {
  return <h1>Hello, Next.js! </h1>;
}

Remember: Next.js is a full stack framework that needs to be hosted on a platform (server) that supports Node.js.

Conclusions

In this post we learned two different ways to get started with Next.js:

• Using create-next-app to generate a boilerplate with all the required dependencies (and the modern defaults: App Router, TypeScript, ESLint, Turbopack).
• Building our own project from scratch and installing the necessary dependencies.

Practice exercises

1. Create a new Next.js project using both ways mentioned in this post.
2. Experiment by adding pages and components to your Next.js app (inside the app/ folder).
3. Research how to deploy your Next.js app to a production server.

Summary

• We learned how to create a Next.js project using create-next-app.
• We learned how to install and configure the dependencies needed for a Next.js project from scratch.
• We configured the scripts we need in our package.json file.

That's all, I hope this post is useful to you and that you can apply it to a project you have in mind, or that it simply helped you understand how to start your Next.js project.

Here's the link to the next post about Next.js: Routing pages with Next.js.

Leave me a comment if it helped, if you want to add an opinion, or if you have any questions. And remember, if you liked it, you can also share it using the social links below.