How to create a basic app with Next.js

Hello dev 👋

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) 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.

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.

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 👆 is better to use the code below.

npm run dev

If you choose yarn creat .... above 👆 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.

Once you save it you can see the changes on your browser.🎉

Congratulations 👏🎉

you just made your first app

You are The Best

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 😉