Next.js Tutorial In Hindi: Build Your First App

Learning Next.js doesn't require complex jargon or reading dense documentation in English. If you know basic React and want to build fast, modern web applications while learning in Hindi or simple Hinglish terms, you're in the right place. This guide walks you through setting up your environment, creating your first pages, handling routing, and connecting data step-by-step.

Next.js is a powerful React framework built by Vercel that handles server-side rendering, routing, and optimization out of the box. Instead of configuring Webpack or setting up separate backend servers for basic apps, Next.js gives you a production-ready setup immediately. Let's write code and build your first app right now.

Prerequisites and Environment Setup

Before writing any code, you need to make sure your computer has the right tools installed. Next.js runs on Node.js, so you'll need a stable version installed on your system.

Open your terminal or command prompt and check if Node.js is ready by running:

node -v
npm -v

If you see version numbers (like v18.x or higher), you're good to go. If not, download and install the long-term support (LTS) version from the Node.js Official Website.

Once Node.js is ready, create your new Next.js project by running this command in your terminal:

npx create-next-app@latest my-nextjs-app

The CLI will ask you a few setup questions. Choose these recommended options for a clean start:

• Would you like to use TypeScript? No (or Yes if you prefer types)
• Would you like to use ESLint? Yes
• Would you like to use Tailwind CSS? Yes (recommended for easy styling)
• Would you like to use src/ directory? Yes
• Would you like to use App Router? Yes
• Would you like to customize the default import alias? No

Move into your project folder and start the local development server:

cd my-nextjs-app
npm run dev

Open your browser and go to http://localhost:3000. You'll see the default Next.js welcome page running live on your machine.

Understanding the App Router Structure

Next.js uses a file-system based router, meaning the folders and files you create inside your project dictate the URLs of your website. In modern Next.js apps using the App Router, everything lives inside the src/app directory.

Take a look at your project folder structure:

• src/app/layout.js: The main wrapper layout shared across all pages.
• src/app/page.js: The homepage of your application (/).
• src/app/globals.css: Global stylesheet containing your Tailwind or custom CSS rules.

When you want to add a new page—like an "About" page—you don't need to configure a router file. You simply create a new folder and file. For example, creating src/app/about/page.js automatically creates the /about route on your website.

Building Your First Custom Page

Let's modify the homepage to display your own custom content. Open src/app/page.js in your code editor (like VS Code), clear out the boilerplate code, and replace it with this simple component:

export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
      <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm">
        <h1 className="text-4xl font-bold mb-4">नमस्ते World! Welcome to Next.js</h1>
        <p className="text-lg text-gray-600 mb-6">
          You're building your very first Next.js application step-by-step.
        </p>
        <div className="flex gap-4">
          <a
            href="/dashboard"
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Go to Dashboard
          </a>
        </div>
      </div>
    </main>
  );
}

Save the file and check your browser at http://localhost:3000. The page updates instantly thanks to Fast Refresh.

Creating Dynamic Routes and Navigation

Real-world apps need multiple pages and dynamic parameters—like viewing a specific user profile or product details. Let's create a dynamic route to see how it works.

Create a new folder structure inside src/app called products/[id], and inside that folder, create a file named page.js. Your path will be src/app/products/[id]/page.js.

Add this code to handle dynamic parameters:

export default async function ProductPage({ params }) {
  const { id } = await params;

  return (
    <div className="p-8">
      <h1 className="text-3xl font-bold">Product Details</h1>
      <p className="mt-4 text-lg">Showing details for Product ID: <span className="font-semibold text-blue-600">{id}</span></p>
    </div>
  );
}

If you visit http://localhost:3000/products/123 in your browser, the page captures 123 from the URL and displays it dynamically.

Fetching Data from an API

Next.js makes data fetching straightforward. Because React components in the App Router are Server Components by default, you can fetch data directly inside your component using async/await without complicated useEffect hooks.

Let's fetch a list of users from a public API (JSONPlaceholder) and display them on a new page. Create src/app/users/page.js:

async function getUsers() {
  const res = await fetch('https://jsonplaceholder.typicode.com/users');
  if (!res.ok) {
    throw new Error('Failed to fetch data');
  }
  return res.json();
}

export default async function UsersPage() {
  const users = await getUsers();

  return (
    <div className="max-w-2xl mx-auto p-8">
      <h1 className="text-3xl font-bold mb-6">User List</h1>
      <ul className="space-y-4">
        {users.map((user) => (
          <li key={user.id} className="p-4 border rounded-lg shadow-sm bg-white">
            <h2 className="font-semibold text-lg">{user.name}</h2>
            <p className="text-gray-600">{user.email}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

Visit http://localhost:3000/users to see all fetched users rendered directly on the server before hitting the browser.

Common Beginner Mistakes to Avoid

When building your first Next.js app, watch out for these frequent pitfalls:

• Mixing Client and Server Components incorrectly: By default, all components in the App Router are Server Components. If you need interactive hooks like useState or useEffect, you must add 'use client' at the very top of that specific file.
• Incorrect folder naming: Next.js routing relies strictly on folder names. Double-check your spelling for special folders like app, api, or dynamic brackets like [id].
• Ignoring error states: Always handle failed API requests or missing parameters gracefully to prevent white screens of death in production.

For deeper dives into advanced rendering strategies, check out the official Next.js Documentation.

Frequently Asked Questions

Do I need to know advanced React before learning Next.js?

You don't need to be an expert, but you should feel comfortable with basic React concepts like JSX, functional components, props, and basic hooks like useState.

Can I deploy a Next.js app for free?

Yes. The creators of Next.js offer Vercel, which provides free hosting for hobby and personal projects with automatic deployments linked directly to your GitHub repository.

What is the difference between Pages Router and App Router?

The Pages Router uses a traditional pages directory where every file maps directly to a route. The newer App Router uses a src/app directory, supports React Server Components by default, and introduces advanced features like layouts, loading states, and streaming.

How do I add backend API endpoints in Next.js?

You can create Route Handlers inside your app directory by adding a route.js file inside any folder, allowing you to write server-side Node.js logic, handle database queries, and return JSON responses.