Learning Next.js Basics

Home Page [index.js]

In this starter overview of Next.js we'll discuss the fundamental basics of creating a new Next.js project and how to get started on building out your project. It's important to note that you should already have a fundamental understanding of React, JavaScript, HTML and CSS prior to going through this walkthrough.

If you do better learning through step-by-step video tutorials, I recommend you check out LearnWebCode for their Next.js beginner tutorial. And of course, if you prefer a more detailed approach, you should check the Next.js Docs

To start up a new Next.js project you have 2 main options. One options is to go in the terminal and run npx create-next-app@latest, which will give you prompts to answer and then automatically supply you with a bunch of boilerplate code to start with. This can be thought of similarly to the old way of using create react app, and you will likely find yourself deleting some of the boilerplate to customize everything to your needs.

The other option, and the one we used for this site, is creating a folder and going into the terminal and running npm install next@latest react@latest react-dom@latest, then going into package.json and adding the following scripts:

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

Then create a .gitignore file within the main folder and add:

# dependencies
/node_modules

# next.js
/.next/
/out/

# production
/build

Now that you have your project started we can get into making the displayable parts of your website. Starting with the page we're on right now.

This is the main page, or home page of the site. To create it you'll want to add a folder named pages, and within that folder add a file named index.js. That will let Next.js know that this is the starting point of your site.

You can think of it similar to the index.html file used when building an HTML page.

With Next.js, all of your pages will be stored in the pages folder with the main/home page named index.js.

The main/home page must be named index.js, however other pages can be named whatever you'd like provided they are in the pages folder.

Next up: Using Link and Images