Hey, buddy, grab a seat while I tell you how I tackled this next js tutorial for beginners. You know, the other day I had to explain to a friend how to start from scratch with Next.js, and I thought: 'Why not write it like we're at the bar?'.

The thing is, building a static site isn't wizardry, but if you don't know where to start, you get lost in a ton of commands. I, for one, wasted hours the first time because I didn't test properly. Next js tutorial is exactly what you need to avoid those messes.

Alright, but what are we building today? A simple static site with a home page and an about page, deployed on Vercel in no time.

Before diving in, let's cover the prerequisites. You need Node.js installed, at least version 14 or higher, and npm for packages. Oh, and a code editor like VS Code, which I prefer because it's fast and doesn't drive me crazy with complicated interfaces. If you don't have it, download and install it; it's a breeze.

Getting Started with Next.js Installation

I was skeptical at first, but Next.js makes everything so smooth. To begin, open your terminal and create a new project. Type this command: npx create-next-app@latest my-static-site --typescript. I added TypeScript because, seriously, it saves you from stupid errors.

Once created, enter the folder: cd my-static-site. And hold on, don't rush: run npm run dev to see the local server. I tried without and lost half an hour debugging. The catch is that sometimes the browser doesn't open by itself.

Building the Home Page

Now that you have the project up, let's modify the home page. Go to the file pages/index.tsx and change the content. Here's a simple example:

import Head from 'next/head';
export default function Home() {
  return (
    

      
        
      
      
Welcome to my site!
      
Here you learn next js tutorial for beginners step by step.
    
  );
}

See? It's React under the hood, but Next.js handles routing. I prefer this approach because it speeds things up without configuring a bunch of stuff. But, hey, if you're like me and hate delays, try optimizing with getStaticProps for static pages.

Adding an Extra Page

But let's not stop there. Let's create an about page. Make a new file in pages/about.tsx and write:

import Head from 'next/head';
export default function About() {
  return (
    

      
        
      
      
About Me
      
Stefano Salvucci, a developer for years, and this is my story.
    
  );
}

Now, access localhost:3000/about in your browser. Works? Awesome. The last time I deployed without testing, I ruined my weekend fixing a broken link. Spoiler: don't repeat my mistakes.

Styling It Up

And to make it nice, let's add some CSS. Next.js supports CSS modules, which I love because it avoids conflicts. Create a file styles/Home.module.css and put this inside:

.container {
  padding: 20px;
  background-color: #f0f0f0;
}

Then, in your component, import it like: import styles from '../styles/Home.module.css'; and use

← Back to blog