Getting Started with Next.js

“The React Framework for Production”

Photo by Fatos Bytyqi on Unsplash

Next.js is slowly becoming the leading library for developing server-rendered webpages. It recently got the capabilities that stood out in GatsbyJS and it has a lot more to offer. Next.js has a great community and offers a good developer experience. A minimal Next project is easy to make as well and doesn’t require a lot of skill.

Next is React-based. This is something that most developers will be familiar with at the moment and I will not focus on teaching React in this article. Next.js projects are easy to deploy on their own platform: Vercel. Check out the official site of Next.js for more information.

Installation

There are two main ways to set up a Next.js project. You can use create-next-app , or you can manually install all packages. I myself am a fan of installing everything myself using NPM so my code is as minimal as possible, so we will do that.

npm init
npm i next react react-dom

We begin by initializing NPM in a new folder and install all necessary packages to start developing a Next.js project. We need React, React-DOM, and Next.

After installing we need to update the package.json scripts to start a Next.js server.

"scripts": {  
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

We will only use npm run dev to start a local development server. Build is used for deploying.

The next step is to create a pages folder in which we will put our React pages. index.js fill be the home page.

This is a minimal page that is valid in Next.js. And when you run the command to start the server, you can browse to localhost:3000 and will see the page we just made.

More Pages

A website almost always consists of multiple pages. Pages to which you can browse using the URL, or using a link. Creating new pages in Next.js is as easy as creating the first page. And creating a proper structure with URLs is just as easy.

Within the pages folder you can create subdirectories or other JavaScript files. The name of the folders and files will directly reflect the URL.

A JavaScript page pages/admin/dashboard.js will automatically get the URL localhost:3000/admin/dashboard . Just like magic!

Let’s just create an about page in the pages folder. Containing the same syntax as our homepage. After that, we will need to add a link to our homepage so we can browse to the about page.

It is almost as simple as in regular HTML. We use a Link component with an anchor tag as a child component to comply to SEO and HTML practices.

Static Files and Head

We might want to add Javascript files or stylesheets to all our pages, and adding this to every single page will be annoying, so we can use the _app.js file which you need to add to the pages folder. A minimal _app.js page looks like this.

You can add your head and other global HTML in this component.

Static files such as images should be saved within a public folder at the root of the project. In this folder, you can add scripts, stylesheets, favicons, and even config files such as robots.txt .

Conclusion

Next.js is a decent library for quickly creating web applications. Especially when paired with TailwindCSS for quick styling. There is a lot more to learn that you can check out in the official documentation. Next.js is here to stay, so learning it will not be worthless.

Thank you for reading and have a good day.