Nextjs For Beginners

I want to share with you easy for beginners tutorial about nextjs, and afterwards i'll share with you a link to a bit more. let's say beginners+ tutorial. Here’s how to create a basic Next.js app for beginners with two pages: Hello World and About, and a menu to navigate between them.

1. Create a Next.js 14 Project If you haven't created a Next.js app yet, follow these steps:

npx create-next-app@14 basic-nextjs-app
cd basic-nextjs-app
npm run dev

1. Create the Pages Next.js uses the pages directory to automatically map files to routes. Let’s create two pages: Home (for "Hello World") and About.

2.1. Home Page
Open pages/index.js and replace the contents with:

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
      <h1>Hello World</h1>
    </div>
  );
}

This creates the "Hello World" page and includes links to both the Home and About pages.

2.2. About Page
Create a new file pages/about.js and add the following content:

import Link from 'next/link';

export default function About() {
  return (
    <div>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
      <h1>About Page</h1>
      <p>This is a simple Next.js app for beginners.</p>
    </div>
  );
}

This creates an About page with a description and the same navigation menu.

1. Start the Development Server To start your app, run:

npm run dev

Visit http://localhost:3000 in your browser to see your Hello World page, and navigate to the About page using the menu.

1. Folder Structure Overview Your project folder should look like this:

basic-nextjs-app/
├── pages/
│ ├── about.js // About page
│ └── index.js // Home page (Hello World)
├── public/
├── styles/
├── node_modules/
├── package.json
└── next.config.js

Final Code
pages/index.js (Home Page)

import Link from 'next/link';

export default function Home() {
  return (
    <div>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
      <h1>Hello World</h1>
    </div>
  );
}

pages/about.js (About Page)

import Link from 'next/link';

export default function About() {
  return (
    <div>
      <nav>
        <Link href="/">Home</Link> | <Link href="/about">About</Link>
      </nav>
      <h1>About Page</h1>
      <p>This is a simple Next.js app for beginners.</p>
    </div>
  );
}

Summary

Two pages: Home and About
Simple navigation menu using from next/link
A "Hello World" message on the home page
Let me know if you need more help adding features or styling the app!

If you want to learn more try this tutorial for nextjs tutorial how to build a todo app.