Next.js Hello World

Welcome to your first steps with Next.js! In this tutorial, you'll learn how to create a basic "Hello World" application using Next.js. By the end of this guide, you'll understand the core structure of a Next.js project and how to create your first page.

Introduction to Next.js

Next.js is a React framework that provides structure, features, and optimizations for your application. It enables you to build server-rendered React applications with minimal configuration, offering features like:

Server-side rendering and static site generation
Automatic code splitting for faster page loads
Simple client-side routing
API routes
Development environment with hot code reloading

Let's dive into creating our first Next.js application!

Prerequisites

Before we start, ensure you have the following installed:

Node.js (version 14.6.0 or newer)
npm (comes with Node.js) or Yarn

Creating Your First Next.js Project

Step 1: Set up a new Next.js project

You can create a new Next.js project using the create-next-app command. Open your terminal and run:

bash
npx create-next-app my-nextjs-app
# or
yarn create next-app my-nextjs-app

This sets up a new Next.js project with all the necessary files and dependencies.

Step 2: Navigate to your project directory

bash
cd my-nextjs-app

Step 3: Exploring the project structure

After creating your project, you'll see the following structure:

my-nextjs-app/
  ├── node_modules/
  ├── pages/
  │   ├── api/
  │   │   └── hello.js
  │   ├── _app.js
  │   └── index.js
  ├── public/
  │   ├── favicon.ico
  │   └── vercel.svg
  ├── styles/
  │   ├── globals.css
  │   └── Home.module.css
  ├── .eslintrc.json
  ├── .gitignore
  ├── next.config.js
  ├── package.json
  └── README.md

Key directories explained:

pages/: Contains all your page components; each file becomes a route
public/: Stores static assets like images and fonts
styles/: Contains CSS files for styling your application

Creating the Hello World Page

The default project already includes an index.js file, which is the homepage of your application. Let's modify it to create our "Hello World" page.

Step 4: Edit the homepage

Open pages/index.js in your code editor and replace its contents with the following:

jsx
import Head from 'next/head'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Hello World</title>
        <meta name="description" content="My first Next.js application" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Hello, World!
        </h1>
        <p className={styles.description}>
          Welcome to my first Next.js application
        </p>
      </main>
    </div>
  )
}

Step 5: Run the development server

Start your Next.js development server by running:

bash
npm run dev
# or
yarn dev

Now, open your browser and navigate to http://localhost:3000. You should see your "Hello World" page displayed!

Understanding the Code

Let's break down the key parts of our index.js file:

Imports:
- import Head from 'next/head': Imports the Head component for adding metadata to the page
- import styles from '../styles/Home.module.css': Imports CSS modules for styling
Page Component:
- export default function Home(): Defines a React component that represents our homepage
- This component returns JSX that defines the structure of our page
Head Component:
- Used to add metadata to our page, including the title and description
- Important for SEO and browser display
Main Content:
- Contains our "Hello World" message and welcome text
- Uses CSS classes from the imported styles module for styling

Creating Additional Pages

Next.js makes it easy to add more pages to your application. Let's create a second page to demonstrate Next.js routing.

Step 6: Create a new page

Create a new file called about.js in the pages directory with the following content:

jsx
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

export default function About() {
  return (
    <div className={styles.container}>
      <Head>
        <title>About - Next.js Hello World</title>
        <meta name="description" content="About my first Next.js application" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>About Page</h1>
        <p className={styles.description}>
          This is an additional page in our Next.js application.
        </p>
        <div className={styles.grid}>
          <Link href="/" className={styles.card}>
            <h2>Back to Home &rarr;</h2>
          </Link>
        </div>
      </main>
    </div>
  )
}

Now, let's add a link from the homepage to our new About page. Return to pages/index.js and update it by adding a navigation link:

jsx
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

export default function Home() {
  return (
    <div className={styles.container}>
      <Head>
        <title>Next.js Hello World</title>
        <meta name="description" content="My first Next.js application" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Hello, World!
        </h1>
        <p className={styles.description}>
          Welcome to my first Next.js application
        </p>
        
        <div className={styles.grid}>
          <Link href="/about" className={styles.card}>
            <h2>About Page &rarr;</h2>
            <p>Learn more about this application.</p>
          </Link>
        </div>
      </main>
    </div>
  )
}

You can now navigate between the home page and about page. Visit http://localhost:3000/about to see your new page, and use the links to navigate back and forth.

Real-World Example: Dynamic Content

Let's enhance our application by adding some dynamic content, which is common in real-world applications.

Step 8: Creating a page with dynamic content

Create a new file called counter.js in the pages directory:

jsx
import { useState } from 'react'
import Head from 'next/head'
import Link from 'next/link'
import styles from '../styles/Home.module.css'

export default function Counter() {
  const [count, setCount] = useState(0)
  
  return (
    <div className={styles.container}>
      <Head>
        <title>Counter - Next.js Hello World</title>
        <meta name="description" content="Interactive counter example" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>
          Counter Example
        </h1>
        
        <div className={styles.description} style={{ marginBottom: '2rem' }}>
          <p>Current count: <strong>{count}</strong></p>
          <div style={{ marginTop: '1rem' }}>
            <button 
              onClick={() => setCount(count + 1)}
              style={{ 
                padding: '0.5rem 1rem', 
                marginRight: '0.5rem',
                backgroundColor: '#0070f3',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer'
              }}
            >
              Increase
            </button>
            <button 
              onClick={() => setCount(count - 1)}
              style={{ 
                padding: '0.5rem 1rem',
                backgroundColor: '#ff4d4f',
                color: 'white',
                border: 'none',
                borderRadius: '5px',
                cursor: 'pointer'
              }}
            >
              Decrease
            </button>
          </div>
        </div>
        
        <div className={styles.grid}>
          <Link href="/" className={styles.card}>
            <h2>Back to Home &rarr;</h2>
          </Link>
        </div>
      </main>
    </div>
  )
}

Step 9: Add a link to the counter page

Update your index.js file to include a link to the new counter page:

jsx
<div className={styles.grid}>
  <Link href="/about" className={styles.card}>
    <h2>About Page &rarr;</h2>
    <p>Learn more about this application.</p>
  </Link>
  <Link href="/counter" className={styles.card}>
    <h2>Counter Example &rarr;</h2>
    <p>See an interactive counter in action.</p>
  </Link>
</div>

Now you have a simple but interactive Counter page that demonstrates how to use React state within a Next.js application.

Summary

Congratulations! You've successfully created your first Next.js application with:

A "Hello World" home page
Multiple pages with client-side navigation
An interactive counter component using React state

In this tutorial, you've learned:

How to create a new Next.js project using create-next-app
The structure of a Next.js application
How to create and navigate between pages
How to add interactive elements with React hooks

Next.js makes it easy to create fast, SEO-friendly React applications with server-side rendering capabilities. This is just the beginning of what you can do with Next.js!

Additional Resources

Exercises

To solidify your understanding, try these exercises:

Create a new page called profile.js that displays information about yourself.
Enhance the counter page to include a reset button and prevent the counter from going below zero.
Create a simple blog post page that displays the current date and time when the page loads.
Add a navigation bar component that appears on all pages of your application.

Happy coding with Next.js!

If you spot any mistakes on this website, please let me know at [email protected]. I’d greatly appreciate your feedback! :)

Introduction to Next.js​

Prerequisites​

Creating Your First Next.js Project​

Step 1: Set up a new Next.js project​

Step 2: Navigate to your project directory​

Step 3: Exploring the project structure​

Creating the Hello World Page​

Step 4: Edit the homepage​

Step 5: Run the development server​

Understanding the Code​

Creating Additional Pages​

Step 6: Create a new page​

Step 7: Adding navigation between pages​

Real-World Example: Dynamic Content​

Step 8: Creating a page with dynamic content​

Step 9: Add a link to the counter page​

Summary​

Additional Resources​

Exercises​