Next.js Tutorial

Master Next.js development with our comprehensive tutorial. Learn server-side rendering, routing, and modern React patterns.

Video Tutorial

Introduction to Next.js

Next.js is a powerful React framework that enables features like server-side rendering and static site generation for modern web applications.

Examples:

function Home() {
  return (
    <div>
      <h1>Welcome to Next.js!</h1>
      <p>This is a Next.js page component</p>
      <p>File-based routing makes it easy to create pages</p>
    </div>
  )
}

A simple Next.js page component

Routing in Next.js

Next.js features a file-system based router built on the concept of pages, making routing simple and intuitive.

Examples:

function BlogPost() {
  // Simulating params for demo
  const params = { slug: 'my-first-post' };
  
  return (
    <article>
      <h1>Blog Post: {params.slug}</h1>
      <p>This demonstrates dynamic routing in Next.js</p>
      <p>The slug parameter comes from the URL path</p>
    </article>
  )
}

Dynamic routing with Next.js App Router

Data Fetching

Next.js provides powerful data fetching methods for both server and client components.

Examples:

function Page() {
  const [data, setData] = React.useState([]);
  const [loading, setLoading] = React.useState(true);

  React.useEffect(() => {
    // Simulating data fetch
    setTimeout(() => {
      setData([
        { id: 1, title: 'First Post' },
        { id: 2, title: 'Second Post' },
        { id: 3, title: 'Third Post' }
      ]);
      setLoading(false);
    }, 1000);
  }, []);

  if (loading) return <div>Loading...</div>;

  return (
    <main>
      <h1>Blog Posts</h1>
      <ul className="post-list">
        {data.map(item => (
          <li key={item.id}>{item.title}</li>
        ))}
      </ul>
    </main>
  )
}

Data fetching example in Next.js