Getting Started With Create-Next-App

Next.js is a react framework for building static pages, progressive web apps, and server-rendered applications. And the easiest way to get started with next.js app development is using their create-next-app.

Just type a single command and you get a modern next.js-powered react application ready. In your terminal type:

npx create-next-app <appName>

where <appName> is the name of the application you want to create.

It will take a couple of minutes to install necessary dependencies like react, react-dom, and next using npm. If the case of no errors, your terminal prompts you about the successful installation of the latest versions of React and Next.

Moreover, it shares further information about the path of the directory along with the next steps that are involved with the app development.

Open the root directory in the code editor and you find the following folder architecture:

The next step is to connect your app with the development server which can be done by the following:

npm run dev

Use the http://localhost:3000 port to access the front-end of the app which looks something like this:

Here, you’ll find almost everything that you need to start from the pages folder that contains the index.js file to the components folder that has the nav file. In addition, any time you are stuck at some point the next.js documentation is super handy. You find queries to all of your problems.

Create-next-app boilerplate has been built with keeping in mind with best development practices. For example, it has zero dependencies to start with incredible offline support. It offers interactive dev experience which has been tested and trusted by several developers out there. So, what are you waiting for? Start using it without coding your next.js app from scratch.