راهنمای مقدماتی Next.js برای شروع درست

Next.js یک فریم‌ورک React است، اما فقط یک روش جدید برای ساخت کامپوننت نیست. این فریم‌ورک درباره کل چرخه ساخت یک برنامه وب تصمیم می‌گیرد: routeها، render شدن صفحه، دریافت داده، metadata، API، تصویرها، cache، و deploy.

اگر از React خام یا Create React App آمده باشید، اولین تفاوت بزرگ این است که Next.js فقط در مرورگر اجرا نمی‌شود. بخشی از برنامه روی سرور ساخته می‌شود، بخشی در زمان build آماده می‌شود، و بخشی در مرورگر تعاملی می‌ماند.

چرا Next.js محبوب شد؟

React برای ساخت UI عالی است، اما به تنهایی درباره routing، SEO، build، server rendering، یا API تصمیم نمی‌گیرد. Next.js این قطعه‌ها را کنار هم می‌گذارد و یک مسیر آماده برای ساخت محصول واقعی می‌دهد.

چیزهایی که معمولاً از Next.js می‌گیرید:

• routing فایل‌محور
• Server Rendering و Static Rendering
• API یا Route Handler
• بهینه‌سازی تصویر و metadata
• code splitting پیش‌فرض
• پشتیبانی خوب از deploy
• ترکیب Server Component و Client Component

App Router چیست؟

در نسخه‌های جدید Next.js، پوشه app مرکز routing است. هر پوشه می‌تواند بخشی از URL باشد و فایل‌هایی مثل page.tsx، layout.tsx، و loading.tsx رفتار route را مشخص می‌کنند.

app/
  page.tsx
  about/
    page.tsx
  blog/
    [slug]/
      page.tsx

در این ساختار، app/page.tsx صفحه اصلی است، app/about/page.tsx مسیر /about را می‌سازد، و [slug] یک route داینامیک برای نوشته‌های بلاگ است.

Server Component و Client Component

در Next.js مدرن، کامپوننت‌ها به صورت پیش‌فرض Server Component هستند. یعنی می‌توانند روی سرور اجرا شوند، داده بگیرند، و HTML آماده تولید کنند. اگر به state، event، یا API مرورگر نیاز دارید، باید از 'use client' استفاده کنید.

'use client'

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)
  return <button onClick={() => setCount(count + 1)}>{count}</button>
}

قاعده ساده: تا وقتی مجبور نیستید، کامپوننت را کلاینتی نکنید. این کار هم performance را بهتر می‌کند، هم مرز امنیتی را تمیزتر نگه می‌دارد.

دریافت داده در Next.js

در App Router می‌توانید در Server Component مستقیماً داده بگیرید:

export default async function BlogPage() {
  const posts = await getPosts()
  return <PostList posts={posts} />
}

برای داده‌هایی که باید در مرورگر تغییر کنند، مثل فیلتر تعاملی یا autocomplete، می‌توانید از Client Component و کتابخانه‌هایی مثل React Query استفاده کنید. نکته مهم این است که هر داده‌ای را در جای مناسب بگیرید: محتوای ثابت و SEO-friendly معمولاً سروری است؛ تعامل لحظه‌ای معمولاً کلاینتی.

Route Handlerها

اگر به endpoint نیاز دارید، می‌توانید در پوشه app/api یک route handler بسازید:

// app/api/health/route.ts
export function GET() {
  return Response.json({ ok: true })
}

برای برنامه‌های کوچک، همین route handlerها کافی‌اند. برای محصول‌های بزرگ‌تر، بهتر است منطق اصلی را از handler بیرون ببرید و در لایه service یا module جداگانه نگه دارید.

Metadata و SEO

Next.js برای metadata API داخلی دارد. به جای ساخت دستی تگ‌های head، می‌توانید metadata هر صفحه را تعریف کنید:

export const metadata = {
  title: 'Blog',
  description: 'Latest articles'
}

برای بلاگ، فروشگاه، مستندات، و صفحه‌های عمومی، این بخش خیلی مهم است. عنوان، توضیح، canonical، Open Graph، و sitemap باید بخشی از کار عادی انتشار باشند.

Deploy

یک پروژه Next.js فقط با build شدن تمام نمی‌شود. باید بدانید برنامه در runtime به چه متغیرهای محیطی نیاز دارد، لاگ‌ها کجا دیده می‌شوند، دامنه چگونه وصل می‌شود، و اگر deploy خراب شد چطور برمی‌گردید.

برای تیم‌های کوچک، یک مسیر deploy تکرارپذیر ارزش زیادی دارد؛ چون زمان تیم به جای نگهداری سرور، صرف ساخت محصول می‌شود.

جمع‌بندی

برای شروع Next.js، لازم نیست همه جزئیات caching، streaming، و Server Actions را روز اول بدانید. اول این پایه‌ها را محکم کنید: routing، تفاوت سرور و کلاینت، دریافت داده، metadata، و deploy. بعد از آن، یادگیری بخش‌های پیشرفته بسیار طبیعی‌تر می‌شود.

منبع

• عنوان اصلی: A Complete Beginner’s Guide to Next.js
• منبع: DEV Community / AWS
• این نوشته یک بازنویسی و ترجمه فارسی با اجازه انتشار است.