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:

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

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

3. Head Component:

   • Used to add metadata to our page, including the title and description
   • Important for SEO and browser display

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

Step 7: Adding navigation between pages

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:

1. A "Hello World" home page
2. Multiple pages with client-side navigation
3. 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

• Next.js Documentation
• Learn Next.js
• Next.js GitHub Repository

Exercises

To solidify your understanding, try these exercises:

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

Happy coding with Next.js!