Introduction Guide to Next.js
Tags: nextjs, react, beginners
Published: 2020-09-22 18:30:34

Next.js is a React framework that ships with all the features you need for production. It gives you the best developer experience because it comes with several functionalities that would have been installed and handled on your own in a "vanilla" React app. In this guide, I will introduce you to Next.js by first explaining what Next is and why use such a tool, and then create a basic app with it.

<hr>
This article is part of a series about Next.js. So feel free to [subscribe to my newsletter](https://ibrahima-ndaw.us5.list-manage.com/subscribe?u=8dedf5d07c7326802dd81a866&id=5d7bcd5b75) to receive the next article in your inbox, if you find value on it.

<hr>

> If you're interested in learning Next.js in a comprehensive way, I highly recommend this [bestseller course](https://click.linksynergy.com/deeplink?id=o1JCNdqL0gw&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Freact-the-complete-guide-incl-redux%2F).

_Let's dive in._

## What is Next.js?

Next.js is a framework built with React, Node.js, Babel, and Webpack. It comes by default with handy features that are not available in a "vanilla" React App.

> Next.js gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed.

Next.js allows you to export your website statically to HTML or render it on the server. It splits your code automatically, which makes your bundle size small and your app fast, because, in the end, only the JavaScript needed will be loading on the browser.

Next.js enables routing in your app by using the file-system-based routing. It will automatically use files located on the `pages` folder as a route, meaning that you even do not need to add an extra library to build a Multi-pages app with Next.

The Next.js framework provides a straightforward solution to build your API using API routes. You can build your entire API with GraphQL, Express, or your favorite framework and then connect it to a database using API routes. Next.js treats files under the `pages/api` directory as API endpoints.

Unlike React, Next has built-in support for Styled JSX, Sass, CSS modules, and more, which make Next.js app easy to style.

## Creating a Next app

A Next.js app can be created manually or with Create Next App. We will go for the latter because it is the recommended way, and it will set up everything automatically for us.

So, open you your command-line interface (CLI) and run this following command:

```shell
  npx create-next-app my-app
```

Once the project is created, let's now explore the file structure:

## File structure

```
├── pages
|  ├── api
|  |  └── hello.js
|  ├── index.js
|  └── _app.js
├── styles
|  ├── globals.css
|  └── Home.module.css
├── package.json
└── yarn.lock
├── README.md
```

As I mentioned earlier, Next.js uses the file system to enable routing in the app. Here, the `index.js` file is the Home page of the project. If you add a new file in the `pages` folder, it will be treated as a route.

Create Next App comes by default with the `api` folder, meaning that the `hello.js` file is an API endpoint. If you hit the API route `http://localhost:3000/api/hello`, you will get a response from the server.

Next.js uses the App component to initialize pages. The `_app.js` file allows you to override the default behavior of the component. If you have global styles or data that need to be sharing across your components, put them here. By the way, the underscore symbol (`_`) tells Next.js to not using the file as a route.

With this in place, we can now preview the project by running this command on the terminal:

```shell
  yarn dev
```

Or for `npm`

```shell
  npm run dev
```

Let's visit on the browser `http://localhost:3000`

![app-preview](https://dev-to-uploads.s3.amazonaws.com/i/dub8k73v6knk519h2ied.PNG)

Great! We have now finished with the introduction to Next.js. We will dive into Next.js static and dynamic routing in the next part of the series.

Thanks for reading, and see you next.

You can find other great content like this on [my blog](https://www.ibrahima-ndaw.com) or follow me [on Twitter](https://twitter.com/ibrahima92_) to get notified.