Imagine building a big Lego city. React lets you build the Lego blocks, but Next.js helps you put them together into a whole city with roads and signs! 🏙️

To create a Next.js app, you need to type a magic spell in your computer's terminal. This spell tells the computer to download everything you need! 🪄

In Next.js, the way you create pages is super fun. You just create files inside a folder called app. If you create a file named page.js inside a folder, that folder becomes a website page! 🗂️

// This is the homepage! (app/page.js)
export default function HomePage() {
  return (
    <div>
      <h1>🚀 Welcome to my Next.js App!</h1>
      <p>This is the home page.</p>
    </div>
  );
}

🚀 Welcome to my Next.js App!
This is the home page.

Let's say you want an "About" page. Just create a folder named about, put a page.js inside it, and visit /about in your browser! It's like opening a secret door. 🚪✨

// This is the About page! (app/about/page.js)
export default function AboutPage() {
  return (
    <div>
      <h1>👋 About Me!</h1>
      <p>I am learning Next.js and it's awesome!</p>
    </div>
  );
}

When you visit: www.yoursite.com/about

It shows:
👋 About Me!
I am learning Next.js and it's awesome!

Just like in React, you can build components (Lego blocks) and use them on different pages. Let's build a Navbar and use it on our Home page!

// File: components/Navbar.js
// We export this block so others can use it
export default function Navbar() {
  return (
    <nav>
      <a href="/">Home</a> | <a href="/about">About</a>
    </nav>
  );
}

// File: app/page.js
// 1. Import the Navbar block from the components folder
import Navbar from '../components/Navbar';

// 2. Use it in your page!
export default function HomePage() {
  return (
    <div>
      <Navbar />
      <h1>Welcome to my App! 👋</h1>
    </div>
  );
}

Home | About
Welcome to my App! 👋

Sometimes your website needs information from the internet, like weather or jokes. Next.js can fetch this data before the page even loads! It's like ordering pizza 🍕 before your friends arrive so it's ready on the table.

// File: app/jokes/page.js

// Notice the word 'async' - it means "wait for the data!"
export default async function JokesPage() {
  // 1. Fetch the data from a website
  const response = await fetch('https://api.example.com/joke');
  
  // 2. Convert it to readable format
  const jokeData = await response.json();

  // 3. Show it on the screen
  return (
    <div>
      <h1>😂 Joke of the Day</h1>
      <p>{jokeData.setup}</p>
      <strong>{jokeData.punchline}</strong>
    </div>
  );
}

😂 Joke of the Day
Why did the scarecrow win an award?
Because he was outstanding in his field!

Let's put it all together! We will create a Blog Homepage that shows a list of articles. We'll use import, export, and Next.js pages!

// File: app/blog/page.js

// 1. Create a small reusable component for a single post
function BlogPost({ title, date }) {
  return (
    <div style={{ border: '1px solid black', margin: '10px' }}>
      <h2>📰 {title}</h2>
      <p>📅 {date}</p>
    </div>
  );
}

// 2. The main page that uses the component
export default function BlogPage() {
  return (
    <div>
      <h1>📝 My Awesome Blog</h1>
      
      {/* Using our component multiple times! */}
      <BlogPost title="I learned Next.js!" date="Monday" />
      <BlogPost title="React is fun!" date="Tuesday" />
      <BlogPost title="Building my first app" date="Wednesday" />
    </div>
  );
}

📝 My Awesome Blog

━━━━━━━━━━━━━━━━━━━━━━━━
📰 I learned Next.js!
📅 Monday
━━━━━━━━━━━━━━━━━━━━━━━━
📰 React is fun!
📅 Tuesday
━━━━━━━━━━━━━━━━━━━━━━━━
📰 Building my first app
📅 Wednesday

Let's see how much you learned! Pick the best answer. 🧠

Check the boxes as you finish each lesson. Watch your progress bar fill up! 🌈

Awesome job reaching here! 🎉 You just learned the basics of Next.js. Here are fun things to do next:

• 🛣️ Create 5 different pages on your website using folders!
• 🎨 Add some CSS to make your Next.js app look colorful.
• 😂 Try fetching a real joke API and display it on your page.
• 🌍 Learn how to put your website on the internet for free using Vercel!
• 🤝 Show your blog to your friends and family!