Next Js Tags: Complete Guide with Code & Explanation

Complete Guide to Next.js: Features, Routing, API, and Examples

Next.js is a powerful React framework used for building fast, SEO-friendly web applications. It simplifies server-side rendering (SSR), static site generation (SSG), and API handling.

In this article, we will explore all key Next.js features, their usage, and examples to help you master Next.js.

---

📌 What is Next.js?

Next.js is a React-based framework developed by Vercel that provides:
✅ Server-side rendering (SSR) and static site generation (SSG).
✅ File-based routing (No need for React Router).
✅ Built-in API routes (No need for a backend setup).
✅ Automatic image optimization.
✅ Better performance and SEO.

🔹 Basic Next.js Example (pages/index.js):

export default function Home() {
    return <h1>Welcome to Next.js!</h1>;
  }

✅ This automatically becomes the homepage (/) in a Next.js project.

---

📌 Setting Up Next.js

1️⃣ Install Next.js (Recommended)

Use the official Next.js setup command:

npx create-next-app@latest my-next-app
cd my-next-app
npm run dev

✅ This sets up Next.js with:

• ESLint for better coding standards.
• Jest for testing.
• Automatic TypeScript support.

2️⃣ Manual Installation

mkdir my-next-app && cd my-next-app
npm init -y
npm install next react react-dom

Add "scripts" in package.json:

"scripts": {
  "dev": "next dev",
  "build": "next build",
  "start": "next start"
}

✅ Run the project with:

npm run dev

---

📌 Next.js File-Based Routing

Next.js automatically creates routes based on the pages/ directory.

Page File	Route
pages/index.js	/
pages/about.js	/about
pages/contact.js	/contact

🔹 Example: Creating an About Page (pages/about.js)

export default function About() {
    return <h1>About Us</h1>;
  }

✅ Access it at: http://localhost:3000/about

---

📌 Dynamic Routing in Next.js

Create dynamic pages using square brackets [ ].

🔹 Example: pages/post/[id].js

import { useRouter } from "next/router";
export default function Post() {
  const router = useRouter();
  const { id } = router.query;
  
  return <h1>Post ID: {id}</h1>;
}

✅ Access http://localhost:3000/post/123 → Output: Post ID: 123

---

📌 Next.js Link Component (Client-Side Navigation)

Use <Link> for fast page transitions.

🔹 Example:

import Link from "next/link";
export default function Home() {
  return (
    <div>
      <h1>Welcome</h1>
      <Link href="/about">Go to About Page</Link>
    </div>
  );
}

✅ Faster navigation than a normal <a> tag.

---

📌 Next.js Image Optimization (next/image)

Next.js automatically optimizes images for better performance.

🔹 Example:

import Image from "next/image";
export default function Profile() {
  return <Image src="/profile.jpg" width={200} height={200} alt="Profile" />;
}

✅ Benefits:

• Lazy loading (Only loads when visible).
• Optimized image formats (WebP, AVIF, etc.).

---

📌 Next.js API Routes (Creating a Backend in Next.js)

Next.js allows creating backend APIs inside the pages/api/ directory.

🔹 Example: Create an API Route (pages/api/hello.js)

export default function handler(req, res) {
    res.status(200).json({ message: "Hello from API!" });
  }

✅ Visit: http://localhost:3000/api/hello → Returns { "message": "Hello from API!" }

---

📌 Next.js Data Fetching Methods

Next.js provides multiple ways to fetch data.

Method	Type	Use Case
getStaticProps	SSG	Pre-render static pages at build time
getServerSideProps	SSR	Fetch data on every request
getStaticPaths	SSG	Generate dynamic static pages
useEffect	CSR	Fetch data on the client side

---

1️⃣ Static Site Generation (SSG) - getStaticProps

Used for faster, pre-rendered pages.

export async function getStaticProps() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await res.json();
  
    return { props: { posts } };
  }
  
  export default function Home({ posts }) {
    return posts.map((post) => <p key={post.id}>{post.title}</p>);
  }

✅ Pre-rendered at build time → Super fast!

---

2️⃣ Server-Side Rendering (SSR) - getServerSideProps

Fetches data on every request (Good for dynamic content).

export async function getServerSideProps() {
    const res = await fetch("https://jsonplaceholder.typicode.com/posts");
    const posts = await res.json();
  
    return { props: { posts } };
  }

✅ Best for real-time data (e.g., user dashboards).

---

📌 Next.js SEO Optimization (next/head)

Next.js improves SEO & metadata with <Head>.

🔹 Example:

import Head from "next/head";
export default function Home() {
  return (
    <>
      <Head>
        <title>My Website</title>
        <meta name="description" content="This is my Next.js website" />
      </Head>
      <h1>Welcome</h1>
    </>
  );
}

✅ Improves SEO and social media previews.

---

📊 Next.js Cheat Sheet

Feature	Example
Page	pages/index.js
Dynamic Route	pages/post/[id].js
Link Navigation	<Link href="/about">Go</Link>
API Route	pages/api/hello.js
SSG	getStaticProps()
SSR	getServerSideProps()
Image Optimization	<Image src="/img.jpg" />
SEO	<Head> <title>Next.js</title> </Head>

---

🖼️ Next.js Infographic

Here’s an infographic summarizing key Next.js concepts:

---

🚀 Conclusion: Why Use Next.js?

Next.js is an essential tool for modern web development because it:
✅ Boosts website speed with SSG & SSR.
✅ Improves SEO automatically.
✅ Has built-in API & image optimization.

---