Getting Started with Next.js

Next.js is a powerful React framework that enables you to build full-stack web applications with ease. In this guide, we'll walk through everything you need to know to get started.

What is Next.js?

Next.js is a React framework that provides:

• Server-Side Rendering (SSR): Improve SEO and initial page load times
• Static Site Generation (SSG): Pre-render pages at build time
• API Routes: Build backend functionality alongside your frontend
• File-based Routing: Simple, intuitive routing system
• Automatic Code Splitting: Optimize performance automatically

Installation

Getting started with Next.js is straightforward. You can create a new Next.js project using the following command:

npx create-next-app@latest my-app

This will prompt you to configure your project with various options:

• TypeScript support
• ESLint configuration
• Tailwind CSS
• App Router (recommended)
• And more!

Project Structure

Once you've created your project, you'll see a structure like this:

my-app/
├── app/
│   ├── layout.js
│   ├── page.js
│   └── globals.css
├── public/
├── package.json
└── next.config.js

The app directory is where you'll spend most of your time. This is where you define your routes and pages.

Creating Your First Page

In Next.js, creating a new page is as simple as creating a new file in the app directory. For example, to create an "About" page:

1. Create app/about/page.js
2. Export a default React component

export default function About() {
  return (
    <div>
      <h1>About Us</h1>
      <p>Welcome to our about page!</p>
    </div>
  );
}

That's it! Your page is now available at /about.

Using Components

Components in Next.js work just like in React. You can create reusable components in a components directory:

// components/Button.js
export default function Button({ children, onClick }) {
  return (
    <button 
      onClick={onClick}
      className="px-4 py-2 bg-blue-500 text-white rounded"
    >
      {children}
    </button>
  );
}

Then import and use it in your pages:

import Button from '@/components/Button';

export default function Home() {
  return (
    <div>
      <Button onClick={() => alert('Clicked!')}>
        Click Me
      </Button>
    </div>
  );
}

Styling with Tailwind CSS

Next.js works seamlessly with Tailwind CSS. If you selected Tailwind during setup, you can start using utility classes immediately:

export default function Home() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-purple-400 to-pink-400">
      <h1 className="text-4xl font-bold text-white text-center py-20">
        Welcome to Next.js!
      </h1>
    </div>
  );
}

Data Fetching

Next.js provides several ways to fetch data:

Server Components (Recommended)

async function getData() {
  const res = await fetch('https://api.example.com/data');
  return res.json();
}

export default async function Page() {
  const data = await getData();
  return <div>{/* Use data */}</div>;
}

Client Components

For client-side data fetching, use the use hook or useEffect:

'use client';

import { useState, useEffect } from 'react';

export default function Page() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch('/api/data')
      .then(res => res.json())
      .then(setData);
  }, []);

  return <div>{data && /* Use data */}</div>;
}

Deployment

Deploying your Next.js app is easy with Vercel:

1. Push your code to GitHub
2. Import your repository in Vercel
3. Deploy with one click!

Vercel is made by the creators of Next.js, so it's optimized for Next.js applications.

Next Steps

Now that you understand the basics, here are some next steps:

1. Learn about Routing: Explore dynamic routes and route groups
2. Add API Routes: Create backend endpoints
3. Optimize Images: Use the Next.js Image component
4. Add Metadata: Improve SEO with metadata API
5. Explore Middleware: Add authentication and more

Conclusion

Next.js is a powerful framework that makes building React applications easier and more efficient. With its built-in features and excellent developer experience, it's an excellent choice for modern web development.

Happy coding! 🚀