Next.js is very popular framework for building modern React applications. It comes with powerful features such as server-side rendering, automatic code-splitting, static exporting options, and much more that make it easy to build scalable and production-ready apps.

Getting Started

To get started all you have to do is just to run:

$ npx create-next-app

create-next-app sets up a React application powered by Next.js by running just one command.

System Requirements

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

Setup

You can create a new Next.js app using create-next-app, which sets up everything automatically for you. Than just:
cd next-app

After the installation is complete, run npm run dev to start the Next development server, this will make the app available on port 3000, on localhost, and just easy as this when we open http://localhost:3000 in our browser we will have:

To edit try to make some changes in pages/index.js and /styles/globals.css:

and check the result on your browser:

Pages

In Next.js, a page is a React Component exported from a .js, .jsx, .ts, or .tsx file in the pages directory. Each page is associated with a route based on its file name.

Example: We will create pages/about.js that exports a React component like below:

function About() {
  return <div>
    <h1>This is About page!</h1>
  </div>
}

export default About

It is accessible at http://localhost:3000/about and looks like this:

Conclusion

This post has shown the new Next.js boilerplate called Create Next App, which is the officially supported Next.js starter application. Click here for documentation. In the next blog, we will look at the new features one by one and also talked about how to get started using them.

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!