How to create a basic app with Next.js
Tags: javascript, react, tutorial, nextjs
Published: 2022-02-15 12:59:08

Hello dev :wave:

In this article, I'll show you how to create a basic APP with next.js

## What is Next.js? 🤔
Next.js is an open-source framework built by the Vercel team on top of Node.js, it does enable React applications to server-side render and generate static websites.
React does endorse Next.js as one of the "Recommended Toolchains" in their official documentation for developers that are looking for solutions when  "Building a server-rendered website with Node.js", so I guess we are on the right track here.

## How to install Next.js?🤔
I'll use [Visual Studio Code (AKA VSCode)](https://code.visualstudio.com/) for our sample here, but you can use any other code editor that you prefer.

Open VSCode and open the explorer panel on the left-hand side.
Click `open folder` and create a new folder where you will have your project.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8imdyalz1059cgw4p2fm.png)

Create a new folder and open it, your VSCode may "refresh", this is normal.

Open VSCode terminal, this terminal is the same as you have on your computer but it already put you in the correct folder for your project.😉

To open the terminal on VSCode
*PS: You can use the shortcut you can see on the right-hand side.*
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qew6ccyppj8eyigo2oid.png)

Rrun the following command (**Choose one**) 
*PS: if you don't know the difference don't worry I'll have an article explaining the difference soon.*
```
npx create-next-app@latest
```
or
```
yarn create next-app
```
*you can use any of the codes above to install Next.js*

Once you run the command above you will have to give a name to your project, you can choose anything, is better to give a proper name from the start, but don't worry too much, for now, this one is just for fun.



After the installation is done, navigate to the folder created by Next.js with the name you gave to your app with the command below, changing `myAppName` for your app name.

```
cd myAppName
```

After you can run the following command to start the server and see your site.

If you choose `npx creat ....` above :point_up_2: is better to use the code below.
```
npm run dev
```
If you choose `yarn creat ....` above :point_up_2: us this code:
```
yarn dev
```

On your browser go to http://localhost:3000 to view your application.

And to edit what you see you can edit the code inside the file `pages/index.js`.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jaln87lqpoyec77lnkbn.png) 
 
Once you save it you can see the changes on your browser.:tada:

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km9ksi0qy8kq7jnhhcpw.png)

#### Congratulations :clap::tada:
you just made your first app 

You are The Best{% spotify spotify:track:6pPWRBubXOBAHnjl5ZIujB %}

## What next?
Next.js has many samples and boilerplates, I'll cover a few of them soon, so we can have some fun learning how to build a blog, how to use Styled-Component and how to use a Content management system (CMS).


 
See you next time 😉