Introduction to Next.js

⚡ What is Next.js?

Next.js is a powerful React framework that enables developers to build fast, production-ready web applications with ease. It's built on top of React but comes with amazing features out of the box—like server-side rendering, static site generation, API routes, and image optimization.

If you're working with React and looking to go to the next level, Next.js is where the magic begins ✨.

🚀 Why Choose Next.js?

Here are some reasons why developers around the world love Next.js:

• Server-Side Rendering (SSR) – Boost performance and SEO by rendering pages on the server.
• Static Site Generation (SSG) – Pre-render pages at build time for blazing-fast load times.
• API Routes – Build serverless functions directly in your app.
• Built-in Routing – No need to install react-router. File-based routing just works!
• Optimized Images – Automatically resize and serve responsive images with the built-in Image component.

📦 Setting Up a Next.js Project

Let’s get your first Next.js app up and running in minutes. All you need is Node.js installed on your system.

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

This command will prompt you for some configuration options like TypeScript, Tailwind, and ESLint. Once done, it scaffolds your project with a clean folder structure.

📁 Project Structure Overview

After setup, your folder will look like this:

my-nextjs-app/
├── pages/
│   ├── index.js
│   └── api/
├── public/
├── styles/
├── next.config.js
├── package.json
└── README.md

The pages/ directory is where routing magic happens. Each file becomes a route!

🌐 Pages and Routing

Creating a new page is as simple as adding a new file inside the pages directory.

// pages/about.js
export default function About() {
  return <h1>About Us Page 📘</h1>;
}

Now visiting /about in your browser will render this component. No need to manually configure routes!

🔁 Server-Side Rendering Example

Here’s how you render content on the server side using getServerSideProps:

export async function getServerSideProps() {
  return {
    props: {
      message: "This page was rendered on the server ⏳",
    },
  };
}

export default function SSRPage({ message }) {
  return <h2>{message}</h2>;
}

⚙️ Static Site Generation Example

If the content doesn’t need to change often, go for static generation:

export async function getStaticProps() {
  return {
    props: {
      timestamp: new Date().toISOString(),
    },
  };
}

export default function StaticPage({ timestamp }) {
  return <p>This page was built at: {timestamp}</p>;
}

🧠 The Power of API Routes

Need a backend? Next.js has your back. Just create a file in pages/api and you’ve got an instant API endpoint.

// pages/api/hello.js
export default function handler(req, res) {
  res.status(200).json({ message: 'Hello from Next.js API 👋' });
}

Visit /api/hello in your browser or test it with Postman—it's that simple.

🎨 Styling in Next.js

You can style components using CSS Modules:

// styles/Home.module.css
.title {
  color: #0070f3;
  font-size: 2rem;
}

// pages/index.js
import styles from '../styles/Home.module.css';

export default function Home() {
  return <h1 className={styles.title}>Styled Heading 🎨</h1>;
}

📦 Built-In Image Optimization

Next.js provides a powerful <Image /> component to optimize images:

import Image from 'next/image';
import logo from '../public/logo.png';

export default function Home() {
  return <Image src={logo} alt="Logo" width={200} height={200} />;
}

🔧 Running the App

To start the app, run the development server:

npm run dev

Open your browser and go to http://localhost:3000. You should see your brand-new Next.js app running smoothly.

🔄 Building and Deploying

When you're ready to ship:

npm run build
npm start

And for hosting, Next.js works great with Vercel (from the creators of Next.js), Netlify, and any platform that supports Node.js.

✅ Final Thoughts

Next.js is not just another React framework—it's a productivity booster that helps you build better, faster, and more scalable web apps. Whether you're building blogs, dashboards, or SaaS platforms, Next.js gives you the perfect blend of flexibility and structure.

Now that you've got an intro under your belt, go explore what else Next.js has to offer. The sky's the limit! 🌐🚀