Next.js چیست؟

Next.js یک فریمورک React برای ساخت اپلیکیشن‌های Full-Stack است که توسط Vercel توسعه داده شده است. Next.js امکاناتی مانند رندرینگ سمت سرور (SSR)، تولید صفحات استاتیک (SSG) و مسیریابی مبتنی بر فایل را به React اضافه می‌کند.

چرا Next.js؟

SEO بهینه - با SSR و SSG موتورهای جستجو محتوای شما را بهتر ایندکس می‌کنند
سرعت بالا - با قابلیت‌های Prefetching و Lazy Loading
مسیریابی آسان - مسیریابی مبتنی بر فایل (File-based Routing)
API Routes - ساخت API بدون نیاز به سرور جداگانه
Image Optimization - بهینه‌سازی خودکار تصاویر
Middleware - کنترل درخواست‌ها قبل از رسیدن به صفحات

نسخه‌های Next.js

Next.js در دو نسخه اصلی عرضه می‌شود:

Pages Router - نسخه کلاسیک و پایدار
App Router - نسخه جدید با قابلیت‌های پیشرفته‌تر (React Server Components)

پیش‌نیازها

قبل از شروع با Next.js، بهتر است با موارد زیر آشنا باشید:

HTML و CSS
جاوااسکریپت (ES6+)
React (مفاهیم پایه)

نصب و راه‌اندازی Next.js

برای شروع یک پروژه Next.js، از دستور زیر استفاده کنید:

npx create-next-app@latest my-app

# انتخاب گزینه‌ها:
# ✔ Would you like to use TypeScript? … No / Yes
# ✔ Would you like to use ESLint? … No / Yes
# ✔ Would you like to use Tailwind CSS? … No / Yes
# ✔ Would you like to use `src/` directory? … No / Yes
# ✔ Would you like to use App Router? … No / Yes
# ✔ Would you like to customize the default import alias? … No / Yes

cd my-app
npm run dev

ساختار پوشه‌ها در Next.js

ساختار یک پروژه Next.js با App Router:

my-app/
├── app/
│   ├── page.js          # صفحه اصلی
│   ├── layout.js        # Layout کلی
│   ├── about/
│   │   └── page.js      # صفحه درباره ما
│   └── blog/
│       ├── page.js      # لیست مقالات
│       └── [slug]/
│           └── page.js  # صفحه مقاله (داینامیک)
├── public/
│   └── images/
├── styles/
│   └── globals.css
├── next.config.js
└── package.json

کامپوننت‌ها در Next.js

کامپوننت‌های Next.js مانند React هستند، اما با قابلیت‌های اضافی:

// app/page.js
export default function HomePage() {
  return (
    <div>
      <h1>سلام به Next.js خوش آمدید!</h1>
      <p>این یک صفحه Next.js است.</p>
    </div>
  );
}

مسیریابی در Next.js

مسیریابی در Next.js مبتنی بر فایل است. هر فایل در پوشه app یک مسیر را مشخص می‌کند:

app/page.js → /
app/about/page.js → /about
app/blog/page.js → /blog
app/blog/[slug]/page.js → /blog/next-js-guide

برای لینک بین صفحات از کامپوننت Link استفاده کنید:

import Link from "next/link";

export default function Navbar() {
  return (
    <nav>
      <Link href="/">خانه</Link>
      <Link href="/about">درباره ما</Link>
      <Link href="/blog">مقالات</Link>
    </nav>
  );
}

رندرینگ در Next.js

Next.js چند نوع رندرینگ را پشتیبانی می‌کند:

SSR (Server Side Rendering) - رندر در سمت سرور
SSG (Static Site Generation) - تولید صفحات استاتیک در Build Time
ISR (Incremental Static Regeneration) - به‌روزرسانی صفحات استاتیک
CSR (Client Side Rendering) - رندر در سمت کلاینت

برای استفاده از SSR در App Router:

// app/blog/[slug]/page.js
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.content }} />
    </article>
  );
}

برای SSG (تولید استاتیک):

export async function generateStaticParams() {
  const posts = await getPosts();
  return posts.map((post) => ({
    slug: post.slug,
  }));
}

داده‌ها در Next.js

Next.js روش‌های مختلفی برای دریافت داده‌ها ارائه می‌دهد:

Server Components - دریافت داده در سمت سرور
Client Components - دریافت داده با useEffect یا کتابخانه‌هایی مانند SWR و TanStack Query
Server Actions - عملیات سمت سرور مانند فرم‌ها

// app/blog/page.js - دریافت داده در Server Component
export default async function BlogPage() {
  const posts = await fetch("https://api.example.com/posts")
    .then(res => res.json());
  
  return (
    <div>
      {posts.map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
        </div>
      ))}
    </div>
  );
}

بهینه‌سازی تصاویر با Next.js

کامپوننت Image در Next.js تصاویر را بهینه می‌کند:

import Image from "next/image";

export default function Profile() {
  return (
    <Image
      src="/profile.jpg"
      alt="پروفایل"
      width={200}
      height={200}
      className="rounded-full"
    />
  );
}

API Routes در Next.js

با Next.js می‌توانید API خود را بسازید:

// app/api/posts/route.js
import { NextResponse } from "next/server";

export async function GET() {
  const posts = await getPosts();
  return NextResponse.json(posts);
}

export async function POST(request) {
  const data = await request.json();
  const newPost = await createPost(data);
  return NextResponse.json(newPost, { status: 201 });
}

Middleware در Next.js

Middleware به شما اجازه می‌دهد قبل از پاسخ به درخواست‌ها، منطق خود را اجرا کنید:

// middleware.js
import { NextResponse } from "next/server";

export function middleware(request) {
  // بررسی احراز هویت
  const token = request.cookies.get("token");
  
  if (!token && request.nextUrl.pathname.startsWith("/dashboard")) {
    return NextResponse.redirect(new URL("/login", request.url));
  }
  
  return NextResponse.next();
}

بهینه‌سازی SEO در Next.js

با کامپوننت Head یا metadata در App Router:

// app/blog/[slug]/page.js
export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  
  return {
    title: post.title,
    description: post.summary,
    openGraph: {
      title: post.title,
      description: post.summary,
      images: [post.image],
    },
  };
}

مثال کامل: اپلیکیشن Blog با Next.js

// app/layout.js
export const metadata = {
  title: "وبلاگ من",
  description: "وبلاگ شخصی من با Next.js",
};

export default function RootLayout({ children }) {
  return (
    <html lang="fa" dir="rtl">
      <body>
        <header>هدر</header>
        {children}
        <footer>فوتر</footer>
      </body>
    </html>
  );
}

// app/page.js
import Link from "next/link";

export default function HomePage() {
  return (
    <main>
      <h1>به وبلاگ من خوش آمدید</h1>
      <Link href="/blog">مشاهده مقالات</Link>
    </main>
  );
}

// app/blog/page.js
async function getPosts() {
  const res = await fetch("https://jsonplaceholder.typicode.com/posts");
  return res.json();
}

export default async function BlogPage() {
  const posts = await getPosts();
  
  return (
    <div>
      <h1>مقالات</h1>
      {posts.slice(0, 10).map(post => (
        <div key={post.id}>
          <h2>{post.title}</h2>
          <p>{post.body.substring(0, 100)}...</p>
          <Link href={`/blog/${post.id}`}>بیشتر بخوانید</Link>
        </div>
      ))}
    </div>
  );
}

// app/blog/[slug]/page.js
async function getPost(id) {
  const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${id}`);
  return res.json();
}

export default async function BlogPost({ params }) {
  const post = await getPost(params.slug);
  
  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.body}</p>
    </article>
  );
}

تست و دیباگ در Next.js

ابزارهای مفید برای تست و دیباگ:

React DevTools - بررسی کامپوننت‌ها
Next.js DevTools - بررسی عملکرد Next.js
Vercel Analytics - آنالیز عملکرد
ESLint - بررسی کد

نتیجه‌گیری

Next.js یک فریمورک قدرتمند است که توسعه React را به سطح بعدی می‌برد. با امکاناتی مانند SSR، SSG، مسیریابی آسان و بهینه‌سازی‌های فراوان، انتخاب عالی برای پروژه‌های مدرن وب است.

منابع مفید: