نکست جی اس یا Next.js یکی از محبوبترین فریمورکهای مبتنی بر React برای ساخت وبسایتها و اپلیکیشنهای مدرن است. این فریمورک امکاناتی مانند مسیریابی، رندر سمت سرور، تولید صفحات استاتیک، ساخت API، بهینهسازی تصاویر، مدیریت فونت، کشکردن دادهها و بهینهسازی سئو را در اختیار توسعهدهندگان قرار میدهد.
در React معمولی، برای راهاندازی بسیاری از این قابلیتها باید کتابخانهها و ابزارهای مختلفی را جداگانه نصب و پیکربندی کنید. اما نکست جی اس بخش بزرگی از این تنظیمات را بهصورت آماده در اختیار شما قرار میدهد. به همین دلیل میتوانید تمرکز بیشتری روی طراحی رابط کاربری، منطق برنامه و توسعه محصول داشته باشید.
طبق تعریف مستندات رسمی، Next.js یک فریمورک React برای ساخت برنامههای فولاستک است که ابزارهای سطح پایین مانند باندلر و کامپایلر را نیز بهصورت خودکار پیکربندی میکند. (nextjs.org)
در این مقاله بهصورت کامل بررسی میکنیم:
نکست جی اس یک فریمورک متنباز مبتنی بر React است که برای ساخت وبسایتها و برنامههای تحت وب سریع، پویا و مقیاسپذیر استفاده میشود.
React در اصل یک کتابخانه برای ساخت رابط کاربری است. React مشخص نمیکند که مسیریابی سایت، دریافت داده، رندر سمت سرور، ساخت API، مدیریت متادیتا یا بهینهسازی تصاویر باید چگونه انجام شود. در مقابل، نکست جی اس یک ساختار کامل برای توسعه برنامه در اختیار شما قرار میدهد.
با استفاده از Next.js میتوانید بخش رابط کاربری و بخشی از منطق سمت سرور پروژه را در یک کدبیس مدیریت کنید. به همین دلیل نکست جی اس معمولاً بهعنوان یک فریمورک فولاستک React شناخته میشود.
مهمترین قابلیتهای نکست جی اس عبارتاند از:
مستندات رسمی Next.js دو سیستم مسیریابی را معرفی میکنند: App Router که سیستم جدیدتر است و Pages Router که سیستم قدیمیتر محسوب میشود اما همچنان پشتیبانی میشود. (nextjs.org)
React و نکست جی اس رقیب یکدیگر نیستند. نکست جی اس بر پایه React ساخته شده است.
در React شما کامپوننتهای رابط کاربری را ایجاد میکنید. Next.js همان مدل کامپوننتی React را نگه میدارد و امکانات بیشتری برای ساخت یک برنامه کامل در اختیار شما قرار میدهد.
| ویژگی | React | Next.js |
|---|---|---|
| نوع ابزار | کتابخانه رابط کاربری | فریمورک React |
| مسیریابی | نیازمند کتابخانه جانبی | داخلی و مبتنی بر فایل |
| رندر سمت سرور | نیازمند تنظیمات جداگانه | پشتیبانی داخلی |
| تولید صفحات استاتیک | نیازمند ابزارهای دیگر | پشتیبانی داخلی |
| ساخت API | بهصورت مستقیم ندارد | Route Handler و API Route |
| مدیریت متادیتا | دستی یا با کتابخانه | Metadata API |
| بهینهسازی تصویر | داخلی ندارد | کامپوننت Image |
| بهینهسازی فونت | داخلی ندارد | ماژول next/font |
| ساخت برنامه فولاستک | نیازمند بکاند جداگانه | برای بسیاری از پروژهها امکانپذیر است |
برای ساخت رابط کاربری با نکست جی اس همچنان باید React را بلد باشید. در واقع یادگیری HTML، CSS، JavaScript و مفاهیم اصلی React پیشنیاز مناسبی برای شروع Next.js است. مستندات رسمی نیز آشنایی با این موارد را بهعنوان پیشنیاز پیشنهاد میکنند. (nextjs.org)
نکست جی اس کد برنامه را به دو بخش اصلی تقسیم میکند:
این تقسیمبندی کمک میکند مقدار JavaScript ارسالشده به مرورگر کاهش پیدا کند و بخشهایی مانند دریافت اطلاعات از دیتابیس، استفاده از کلیدهای محرمانه و تولید HTML روی سرور انجام شوند.
در App Router، صفحات و Layoutها بهصورت پیشفرض Server Component هستند. زمانی که به state، رویدادهایی مانند onClick، هوک useEffect یا APIهای مرورگر مانند window و localStorage نیاز دارید، باید از Client Component استفاده کنید. (nextjs.org)
نکست جی اس در زمان Build کدها را کامپایل و بهینه میکند، صفحات قابل پیشتولید را میسازد و فایلهای موردنیاز برای انتشار را آماده میکند. (nextjs.org)
App Router سیستم مسیریابی جدید نکست جی اس است که از پوشه app استفاده میکند. این سیستم بر پایه قابلیتهایی مانند React Server Components، Layoutهای تودرتو، Streaming، مدیریت خطا و حالت Loading ساخته شده است.
در پروژههای جدید معمولاً استفاده از App Router پیشنهاد میشود. Pages Router همچنان پشتیبانی میشود، اما مستندات رسمی استفاده از App Router را برای دسترسی به قابلیتهای جدید React توصیه میکنند. (nextjs.org)
ساختار ساده یک پروژه App Router ممکن است به شکل زیر باشد:
my-app/
├── app/
│ ├── layout.tsx
│ ├── page.tsx
│ ├── globals.css
│ ├── about/
│ │ └── page.tsx
│ ├── blog/
│ │ ├── page.tsx
│ │ └── [slug]/
│ │ └── page.tsx
│ └── api/
│ └── posts/
│ └── route.ts
├── public/
├── next.config.ts
├── package.json
└── tsconfig.json
در این ساختار:
app/page.tsx صفحه اصلی سایت است.app/layout.tsx قالب اصلی سایت را مشخص میکند.app/about/page.tsx مسیر /about را ایجاد میکند.[slug] برای ساخت مسیرهای داینامیک استفاده میشود.route.ts برای ساخت API به کار میرود.public محل قرارگیری فایلهای عمومی مانند تصاویر است.Pages Router سیستم مسیریابی قدیمیتر نکست جی اس است که از پوشه pages استفاده میکند.
برای مثال:
pages/
├── index.tsx
├── about.tsx
├── blog/
│ └── [slug].tsx
└── api/
└── posts.ts
در Pages Router هر فایل موجود در پوشه pages به یک مسیر تبدیل میشود. برای دریافت اطلاعات نیز معمولاً از توابعی مانند موارد زیر استفاده میشود:
getStaticProps
getServerSideProps
getStaticPaths
Pages Router هنوز در نسخههای جدید نکست جی اس پشتیبانی و نگهداری میشود؛ بنابراین پروژههای قدیمی مجبور به مهاجرت فوری نیستند. بااینحال، برای پروژه جدید بهتر است ابتدا App Router را بررسی کنید. (nextjs.org)
قبل از شروع آموزش نکست جی اس بهتر است با موارد زیر آشنا باشید:
useState و useEffectبرای شروع لازم نیست متخصص React باشید؛ اما بدون دانستن مفاهیم پایه React، درک Server Component، Client Component، Props، State و مدیریت فرمها دشوار خواهد بود.
سریعترین روش برای ساخت پروژه نکست جی اس استفاده از ابزار create-next-app است. این ابزار ساختار پروژه و وابستگیهای لازم را بهصورت خودکار ایجاد میکند. (nextjs.org)
ابتدا مطمئن شوید Node.js روی سیستم شما نصب شده است. سپس دستور زیر را اجرا کنید:
npx create-next-app@latest my-next-app
بعد وارد پوشه پروژه شوید:
cd my-next-app
سرور توسعه را اجرا کنید:
npm run dev
اکنون آدرس زیر را در مرورگر باز کنید:
http://localhost:3000
دستورات اصلی پروژه عبارتاند از:
npm run dev
npm run build
npm run start
npm run lint
کاربرد هر دستور:
npm run dev پروژه را در حالت توسعه اجرا میکند.npm run build نسخه Production را میسازد.npm run start نسخه ساختهشده را اجرا میکند.npm run lint خطاهای مربوط به کیفیت کد را بررسی میکند.در تنظیمات پیشنهادی فعلی create-next-app، امکاناتی مانند TypeScript، ESLint، Tailwind CSS و App Router قابل فعالسازی هستند. Turbopack نیز در نسخههای جدید بهعنوان باندلر پیشفرض محیط توسعه استفاده میشود. (nextjs.org)
فایل app/page.tsx را باز کنید و کد زیر را داخل آن قرار دهید:
export default function HomePage() {
return (
<main>
<h1>آموزش نکست جی اس</h1>
<p>اولین پروژه من با Next.js ساخته شده است.</p>
</main>
)
}
فایل page.tsx باید یک کامپوننت React را بهصورت پیشفرض Export کند.
برای ساخت صفحه درباره ما، پوشه و فایل زیر را ایجاد کنید:
app/about/page.tsx
محتوای فایل:
export default function AboutPage() {
return (
<main>
<h1>درباره ما</h1>
<p>این صفحه با App Router ساخته شده است.</p>
</main>
)
}
با بازکردن مسیر /about صفحه جدید نمایش داده میشود.
مسیریابی نکست جی اس بر اساس ساختار فایلها انجام میشود؛ یعنی پوشهها و فایلهای داخل app مشخص میکنند هر صفحه با چه آدرسی در دسترس باشد. (nextjs.org)
Layout یک رابط کاربری مشترک میان چند صفحه است. برای مثال، هدر، منوی اصلی و فوتر سایت را میتوان داخل Layout قرار داد تا در تمام صفحات تکرار شوند.
فایل اصلی Layout در مسیر زیر قرار میگیرد:
app/layout.tsx
نمونه:
import type { Metadata } from 'next'
import './globals.css'
export const metadata: Metadata = {
title: 'آموزش نکست جی اس',
description: 'سایت آموزشی ساختهشده با Next.js',
}
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode
}>) {
return (
<html lang="fa" dir="rtl">
<body>
<header>هدر سایت</header>
{children}
<footer>فوتر سایت</footer>
</body>
</html>
)
}
متغیر children محتوای صفحه فعلی را نمایش میدهد.
میتوانید برای قسمتهای مختلف سایت Layoutهای جداگانه ایجاد کنید. برای مثال، داشبورد مدیریت میتواند Layout متفاوتی نسبت به صفحات عمومی سایت داشته باشد.
برای ایجاد صفحه داینامیک باید نام پوشه را داخل براکت قرار دهید.
برای مثال:
app/blog/[slug]/page.tsx
این مسیر میتواند آدرسهای زیر را مدیریت کند:
/blog/learn-next-js
/blog/react-tutorial
/blog/web-development
نمونه صفحه داینامیک:
type PageProps = {
params: Promise<{
slug: string
}>
}
export default async function BlogPostPage({ params }: PageProps) {
const { slug } = await params
return (
<main>
<h1>مقاله: {slug}</h1>
</main>
)
}
مقدار slug را میتوان برای دریافت مقاله از دیتابیس، فایل یا سرویس مدیریت محتوا استفاده کرد.
برای ایجاد لینک میان صفحات داخلی بهتر است از کامپوننت Link استفاده کنید:
import Link from 'next/link'
export default function Navigation() {
return (
<nav>
<Link href="/">صفحه اصلی</Link>
<Link href="/about">درباره ما</Link>
<Link href="/blog">وبلاگ</Link>
</nav>
)
}
کامپوننت Link امکان جابهجایی سمت کلاینت را فراهم میکند. نکست جی اس همچنین میتواند مسیرهایی را که در محدوده دید کاربر قرار گرفتهاند از قبل دریافت کند تا جابهجایی میان صفحات سریعتر انجام شود. (nextjs.org)
در App Router، کامپوننتها بهصورت پیشفرض Server Component هستند.
Server Component روی سرور اجرا میشود و برای موارد زیر مناسب است:
نمونه:
async function getPosts() {
const response = await fetch('https://example.com/api/posts')
if (!response.ok) {
throw new Error('دریافت مقالات ناموفق بود')
}
return response.json()
}
export default async function PostsPage() {
const posts = await getPosts()
return (
<main>
<h1>مقالات</h1>
<ul>
{posts.map((post: { id: number; title: string }) => (
<li key={post.id}>{post.title}</li>
))}
</ul>
</main>
)
}
Server Components به باندل JavaScript سمت کاربر اضافه نمیشوند و میتوانند مستقیماً دادهها را روی سرور دریافت کنند. در مقابل، امکان استفاده از State، رویدادهای مرورگر و APIهایی مانند window را ندارند. (nextjs.org)
هر زمان به تعامل کاربر، State، Event Handler یا API مرورگر نیاز دارید، باید Client Component بسازید.
برای تبدیل یک فایل به Client Component، عبارت زیر را در ابتدای فایل قرار دهید:
'use client'
مثال شمارنده:
'use client'
import { useState } from 'react'
export default function Counter() {
const [count, setCount] = useState(0)
return (
<section>
<p>تعداد کلیک: {count}</p>
<button onClick={() => setCount(count + 1)}>
افزایش
</button>
</section>
)
}
Client Component برای موارد زیر مناسب است:
useStateuseEffectlocalStoragewindow و documentبهتر است تنها بخشهایی را Client Component کنید که واقعاً به تعامل نیاز دارند. تبدیل کل صفحه به Client Component میتواند مقدار JavaScript سمت مرورگر را افزایش دهد.
یکی از مهمترین مزایای نکست جی اس، پشتیبانی از چند روش رندرینگ است.
در رندر استاتیک، محتوای صفحه پیش از درخواست کاربر تولید میشود. این روش برای صفحات زیر مناسب است:
صفحات استاتیک معمولاً سرعت بالایی دارند و بهراحتی از طریق CDN ارائه میشوند.
در رندر داینامیک، محتوا هنگام درخواست کاربر روی سرور تولید میشود.
این روش برای موارد زیر مناسب است:
SSR مخفف Server-Side Rendering است. در این روش HTML صفحه روی سرور تولید و سپس برای مرورگر ارسال میشود.
SSR میتواند برای صفحاتی که اطلاعات آنها در هر درخواست تغییر میکند مفید باشد. بااینحال استفاده بیدلیل از رندر داینامیک میتواند بار سرور را افزایش دهد.
SSG مخفف Static Site Generation است. در این روش HTML صفحات هنگام Build ساخته میشود.
SSG برای محتوایی مناسب است که بهندرت تغییر میکند. سرعت بالا و امکان کششدن در CDN از مزایای اصلی آن است.
ISR مخفف Incremental Static Regeneration است. این روش اجازه میدهد محتوای استاتیک بدون Build کامل پروژه بهروزرسانی شود.
در مدلهای جدید کش نکست جی اس میتوان محتوا را بر اساس زمان یا پس از یک تغییر مشخص دوباره اعتبارسنجی کرد. برای مثال پس از انتشار مقاله جدید، کش صفحه وبلاگ پاک یا بهروزرسانی میشود.
Streaming اجازه میدهد بخشهای آماده صفحه سریعتر برای کاربر ارسال شوند و قسمتهایی که به اطلاعات کندتر وابستهاند، بعداً نمایش داده شوند.
برای این کار میتوان از فایل loading.tsx یا کامپوننت Suspense استفاده کرد. Streaming در App Router به شما کمک میکند کاربر بهجای انتظار برای آمادهشدن تمام اطلاعات، سریعتر ساختار اولیه صفحه را ببیند. (nextjs.org)
در Server Component میتوانید مستقیماً از fetch، ORM یا دیتابیس استفاده کنید.
نمونه:
type Product = {
id: number
title: string
price: number
}
async function getProducts(): Promise<Product[]> {
const response = await fetch('https://example.com/api/products')
if (!response.ok) {
throw new Error('خطا در دریافت محصولات')
}
return response.json()
}
export default async function ProductsPage() {
const products = await getProducts()
return (
<main>
<h1>محصولات</h1>
{products.map((product) => (
<article key={product.id}>
<h2>{product.title}</h2>
<p>{product.price.toLocaleString('fa-IR')} تومان</p>
</article>
))}
</main>
)
}
در مستندات فعلی، درخواستهای fetch بهصورت پیشفرض کش دائمی نمیشوند. برای کشکردن داده باید رفتار موردنظر را بهصورت مشخص تعریف کنید یا از قابلیتهای Cache Components استفاده کنید. این موضوع با برخی آموزشهای قدیمی نکست جی اس تفاوت دارد. (nextjs.org)
کش یکی از بخشهای قدرتمند اما نسبتاً پیچیده نکست جی اس است.
هدف کش این است که اطلاعات یا خروجی رندرشده چند بار بدون انجام درخواست تکراری استفاده شود. این کار میتواند سرعت برنامه را افزایش و فشار روی API و دیتابیس را کاهش دهد.
در مدل جدید Cache Components، ابتدا باید این قابلیت را در فایل تنظیمات فعال کنید:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
cacheComponents: true,
}
export default nextConfig
سپس میتوانید یک تابع را کش کنید:
import { cacheLife } from 'next/cache'
export async function getProducts() {
'use cache'
cacheLife('hours')
const response = await fetch('https://example.com/api/products')
if (!response.ok) {
throw new Error('دریافت محصولات ناموفق بود')
}
return response.json()
}
برای بهروزرسانی کش نیز ابزارهایی مانند موارد زیر وجود دارد:
revalidatePath
revalidateTag
updateTag
cacheLife
cacheTag
دو روش اصلی Revalidation عبارتاند از:
برای مثال، پس از ویرایش محصول میتوانید کش مربوط به محصولات را با Tag مشخص بهروزرسانی کنید.
قابلیت Cache Components اختیاری است و امکان ترکیب محتوای استاتیک، کششده و داینامیک را در یک مسیر فراهم میکند. (nextjs.org)
فایل loading.tsx برای نمایش حالت بارگذاری استفاده میشود.
ساختار:
app/products/loading.tsx
نمونه:
export default function Loading() {
return (
<div role="status">
در حال دریافت محصولات...
</div>
)
}
تا زمانی که اطلاعات صفحه محصولات آماده شود، این رابط به کاربر نمایش داده میشود.
بهتر است بهجای یک متن ساده، از Skeleton متناسب با ساختار نهایی صفحه استفاده کنید تا تجربه کاربری بهتری ایجاد شود.
برای مدیریت خطاهای غیرمنتظره یک مسیر میتوانید فایل error.tsx بسازید.
'use client'
import { useEffect } from 'react'
type ErrorPageProps = {
error: Error & {
digest?: string
}
unstable_retry: () => void
}
export default function ErrorPage({
error,
unstable_retry,
}: ErrorPageProps) {
useEffect(() => {
console.error(error)
}, [error])
return (
<section>
<h2>خطایی رخ داده است</h2>
<button onClick={unstable_retry}>
تلاش مجدد
</button>
</section>
)
}
فایل error.tsx مانند Error Boundary عمل میکند و بهجای خرابشدن کل برنامه، رابط جایگزین نمایش میدهد.
برای صفحه 404 نیز میتوانید فایل زیر را ایجاد کنید:
app/not-found.tsx
نمونه:
import Link from 'next/link'
export default function NotFoundPage() {
return (
<main>
<h1>صفحه پیدا نشد</h1>
<Link href="/">بازگشت به صفحه اصلی</Link>
</main>
)
}
نکست جی اس برای مدیریت خطاهای مورد انتظار، صفحات پیدانشده، خطاهای غیرمنتظره و Error Boundaryهای تودرتو امکانات جداگانهای ارائه میدهد. (nextjs.org)
Server Action تابعی است که روی سرور اجرا میشود و میتواند مستقیماً به یک فرم یا Client Component متصل شود.
این قابلیت برای عملیات زیر کاربرد دارد:
نمونه:
'use server'
import { revalidatePath } from 'next/cache'
export async function createMessage(formData: FormData) {
const name = String(formData.get('name') ?? '')
const message = String(formData.get('message') ?? '')
if (!name.trim() || !message.trim()) {
return {
success: false,
message: 'تمام فیلدها را تکمیل کنید.',
}
}
// ذخیره اطلاعات در دیتابیس
revalidatePath('/messages')
return {
success: true,
message: 'پیام با موفقیت ثبت شد.',
}
}
استفاده در فرم:
import { createMessage } from './actions'
export default function ContactForm() {
return (
<form action={createMessage}>
<input name="name" placeholder="نام" required />
<textarea name="message" placeholder="پیام" required />
<button type="submit">ارسال پیام</button>
</form>
)
}
Server Actions با معماری کش نکست جی اس یکپارچه هستند و پس از تغییر داده میتوانند مسیر یا Tag مرتبط را Revalidate کنند. (nextjs.org)
تمام اطلاعات دریافتی در Server Action باید اعتبارسنجی شوند. همچنین احراز هویت و بررسی سطح دسترسی باید داخل کد سمت سرور انجام شود؛ زیرا مخفیبودن دکمه در رابط کاربری بهتنهایی امنیت ایجاد نمیکند.
در App Router برای ساخت API از Route Handler استفاده میشود.
فایل زیر را ایجاد کنید:
app/api/posts/route.ts
نمونه GET:
export async function GET() {
const posts = [
{
id: 1,
title: 'آموزش نکست جی اس',
},
{
id: 2,
title: 'آموزش React',
},
]
return Response.json(posts)
}
نمونه POST:
export async function POST(request: Request) {
const body = await request.json()
if (!body.title) {
return Response.json(
{
message: 'عنوان الزامی است.',
},
{
status: 400,
},
)
}
return Response.json(
{
id: 3,
title: body.title,
},
{
status: 201,
},
)
}
Route Handler از متدهای متداول HTTP مانند GET، POST، PUT، PATCH، DELETE، HEAD و OPTIONS پشتیبانی میکند. این فایل فقط داخل پوشه app قابل استفاده است و معادل API Routes در Pages Router محسوب میشود. (nextjs.org)
نکست جی اس میتواند بخش بزرگی از نیازهای بکاند پروژههای کوچک و متوسط را پوشش دهد. برای مثال میتوانید با آن:
بااینحال، Next.js همیشه جایگزین کامل یک بکاند مستقل نیست.
برای پروژههایی با پردازشهای سنگین، صفهای پیچیده، معماری Microservice، ارتباطات طولانیمدت یا چندین مصرفکننده مختلف API، ممکن است بکاند جداگانه با Node.js، NestJS، Laravel، Django یا فناوری دیگری انتخاب مناسبتری باشد.
در بسیاری از پروژهها Next.js نقش Backend for Frontend را دارد؛ یعنی APIها و منطق سمت سرور را متناسب با نیاز رابط کاربری مدیریت میکند. مستندات رسمی نیز راهنمای مستقلی برای استفاده از Next.js بهعنوان Backend for Frontend ارائه میکنند. (nextjs.org)
نکست جی اس از روشهای مختلف استایلدهی پشتیبانی میکند:
مستندات رسمی تمام این روشها را بهعنوان گزینههای قابل استفاده معرفی میکنند. (nextjs.org)
فایل زیر را ایجاد کنید:
app/components/button.module.css
محتوا:
.button {
padding: 12px 20px;
border: 0;
border-radius: 8px;
cursor: pointer;
font-weight: 700;
}
کامپوننت:
import styles from './button.module.css'
export default function Button() {
return (
<button className={styles.button}>
مشاهده بیشتر
</button>
)
}
CSS Modules نام کلاسها را محلی میکند و احتمال تداخل استایل میان کامپوننتها را کاهش میدهد.
کامپوننت Image امکانات بیشتری نسبت به تگ معمولی img ارائه میدهد.
نمونه:
import Image from 'next/image'
export default function HeroImage() {
return (
<Image
src="/images/next-js-course.jpg"
alt="دوره آموزش نکست جی اس"
width={1200}
height={630}
priority
/>
)
}
قابلیتهای مهم next/image عبارتاند از:
مستندات رسمی اعلام میکنند که کامپوننت Image میتواند تصاویر را متناسب با دستگاه ارائه کند، از Layout Shift جلوگیری کند و تصاویر خارج از محدوده دید را با Lazy Loading بارگذاری کند. (nextjs.org)
برای سئو حتماً مقدار alt را بهصورت توصیفی و مرتبط بنویسید. از تکرار غیرطبیعی کلمه کلیدی در تمام تصاویر خودداری کنید.
ماژول next/font برای بارگذاری و بهینهسازی فونت استفاده میشود.
نمونه فونت محلی:
import localFont from 'next/font/local'
const vazir = localFont({
src: './fonts/Vazirmatn.woff2',
display: 'swap',
})
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="fa" dir="rtl">
<body className={vazir.className}>
{children}
</body>
</html>
)
}
ماژول next/font فونتها را بهصورت بهینه و Self-hosted ارائه میکند و درخواست خارجی برای دریافت فونت را کاهش میدهد. این قابلیت میتواند به بهبود حریم خصوصی، عملکرد و ثبات چیدمان کمک کند. (nextjs.org)
یکی از دلایل اصلی استفاده از نکست جی اس، امکانات مناسب آن برای سئو تکنیکال است.
بااینحال نصب Next.js بهتنهایی باعث رتبهگرفتن سایت نمیشود. کیفیت محتوا، لینکسازی داخلی، سرعت، تجربه کاربری، اعتبار دامنه، ساختار صفحات و پاسخدادن به نیاز کاربر همچنان اهمیت دارند.
نکست جی اس ابزارهای فنی لازم برای مدیریت موارد زیر را فراهم میکند:
Metadata API بهطور مشخص برای افزودن عنوان، توضیحات و اطلاعات مرتبط با سئو و اشتراکگذاری صفحات طراحی شده است. (nextjs.org)
import type { Metadata } from 'next'
export const metadata: Metadata = {
title: 'نکست جی اس چیست؟ آموزش جامع Next.js',
description:
'در این مقاله با نکست جی اس، App Router، رندرینگ، سئو و ساخت پروژه آشنا میشوید.',
alternates: {
canonical: 'https://example.com/next-js',
},
openGraph: {
title: 'آموزش جامع نکست جی اس',
description:
'راهنمای کامل یادگیری و استفاده از Next.js',
url: 'https://example.com/next-js',
type: 'article',
locale: 'fa_IR',
},
}
برای صفحات مقاله یا محصول میتوانید از generateMetadata استفاده کنید:
import type { Metadata } from 'next'
type PageProps = {
params: Promise<{
slug: string
}>
}
export async function generateMetadata({
params,
}: PageProps): Promise<Metadata> {
const { slug } = await params
const post = await getPost(slug)
return {
title: post.seoTitle || post.title,
description: post.seoDescription || post.excerpt,
alternates: {
canonical: `https://example.com/blog/${post.slug}`,
},
openGraph: {
title: post.title,
description: post.excerpt,
type: 'article',
images: [post.image],
},
}
}
تابع generateMetadata و شیء metadata فقط در Server Componentها قابل استفاده هستند. (nextjs.org)
فایل زیر را ایجاد کنید:
app/sitemap.ts
نمونه:
import type { MetadataRoute } from 'next'
export default function sitemap(): MetadataRoute.Sitemap {
return [
{
url: 'https://example.com',
lastModified: new Date(),
changeFrequency: 'weekly',
priority: 1,
},
{
url: 'https://example.com/next-js',
lastModified: new Date(),
changeFrequency: 'monthly',
priority: 0.8,
},
]
}
فایل sitemap.ts به نکست جی اس اجازه میدهد یک سایتمپ استاندارد برای کمک به خزش و ایندکس صفحات تولید کند. (nextjs.org)
فایل زیر را ایجاد کنید:
app/robots.ts
نمونه:
import type { MetadataRoute } from 'next'
export default function robots(): MetadataRoute.Robots {
return {
rules: {
userAgent: '*',
allow: '/',
disallow: ['/admin/', '/api/'],
},
sitemap: 'https://example.com/sitemap.xml',
}
}
فایل robots.ts مشخص میکند موتورهای جستوجو اجازه دسترسی به کدام مسیرها را دارند. (nextjs.org)
برای مقاله میتوانید Schema مربوط به Article را اضافه کنید:
const articleSchema = {
'@context': 'https://schema.org',
'@type': 'Article',
headline: 'نکست جی اس چیست؟',
description: 'آموزش جامع Next.js از صفر تا انتشار پروژه',
author: {
'@type': 'Person',
name: 'نام نویسنده',
},
datePublished: '2026-07-22',
dateModified: '2026-07-22',
}
export default function ArticlePage() {
return (
<>
<script
type="application/ld+json"
dangerouslySetInnerHTML={{
__html: JSON.stringify(articleSchema).replace(
/</g,
'\\u003c',
),
}}
/>
<article>
<h1>نکست جی اس چیست؟</h1>
</article>
</>
)
}
مستندات رسمی Next.js راهنمای جداگانهای برای پیادهسازی JSON-LD ارائه میکنند. (nextjs.org)
برای سئوی بهتر پروژه نکست جی اس به این نکات توجه کنید:
عنوان تمام صفحات نباید یکسان باشد. عنوان باید موضوع اصلی صفحه و در صورت نیاز نام برند را شامل شود.
برای صفحات مهم توضیحات اختصاصی بنویسید. توضیح باید خلاصهای واقعی از محتوای صفحه باشد.
عنوان اصلی صفحه را داخل H1 قرار دهید و زیرعنوانها را با H2 و H3 ساختاربندی کنید.
مقالات مرتبط را با انکرتکست توصیفی به یکدیگر متصل کنید.
بهجای عبارت:
اینجا کلیک کنید
از عبارت دقیقتر استفاده کنید:
آموزش ساخت API در نکست جی اس
صفحات جستوجوی داخلی، فیلترهای تکراری و مسیرهای آزمایشی ممکن است نیازمند noindex یا مسدودسازی کنترلشده باشند.
ابعاد صحیح، فرمت مناسب و Alt توصیفی برای تصاویر در نظر بگیرید.
محتوای مهم مقاله یا محصول را صرفاً بعد از اجرای JavaScript سمت کاربر دریافت نکنید. Server Components میتوانند محتوای اصلی را بهصورت HTML اولیه در اختیار مرورگر و خزنده قرار دهند.
استفاده از Next.js تضمین نمیکند که سایت همیشه سریع باشد. اسکریپتهای سنگین، تصاویر بزرگ، کامپوننتهای کلاینت غیرضروری و درخواستهای زیاد همچنان میتوانند عملکرد سایت را کاهش دهند.
برای ساخت سیستم ورود میتوانید از روشهای مختلف استفاده کنید:
جریان کلی احراز هویت شامل مراحل زیر است:
اطلاعات حساس و بررسی مجوزها باید روی سرور انجام شوند. همچنین متغیرهایی که نباید در مرورگر دیده شوند، نباید پیشوند عمومی سمت کلاینت داشته باشند.
متغیرهای محیطی معمولاً در فایل .env.local قرار میگیرند:
DATABASE_URL="..."
AUTH_SECRET="..."
PAYMENT_API_KEY="..."
NEXT_PUBLIC_SITE_URL="https://example.com"
متغیرهایی که با NEXT_PUBLIC_ شروع میشوند میتوانند در کد سمت مرورگر قرار بگیرند. بنابراین کلیدهای خصوصی، رمزها و اطلاعات دیتابیس نباید با این پیشوند تعریف شوند.
نمونه استفاده در Server Component:
const databaseUrl = process.env.DATABASE_URL
فایل .env.local را داخل مخزن عمومی Git قرار ندهید.
Next.js میتواند به دیتابیسهای مختلف متصل شود، از جمله:
برای مدیریت دیتابیس میتوانید از ORM یا Query Builder استفاده کنید.
منطق اتصال به دیتابیس باید فقط روی سرور اجرا شود. Server Components، Server Actions و Route Handlers محل مناسبی برای اجرای این کدها هستند.
نمونه ساختار:
app/
├── actions.ts
├── api/
├── products/
└── users/
lib/
├── db.ts
├── auth.ts
└── validations.ts
فایل lib/db.ts میتواند اتصال یا Client دیتابیس را نگهداری کند.
قبل از انتشار، نسخه Production را بسازید:
npm run build
اگر Build با موفقیت انجام شد، میتوانید پروژه را اجرا کنید:
npm run start
روشهای رایج انتشار عبارتاند از:
نکست جی اس برای اجرای کامل قابلیتهای داینامیک به محیطی با پشتیبانی Node.js یا Adapter سازگار نیاز دارد. امکان Self-host روی Node.js، Docker یا خروجی استاتیک نیز وجود دارد. (nextjs.org)
برای سایتی که هیچ قابلیت سمت سرور ندارد، میتوانید خروجی استاتیک ایجاد کنید:
import type { NextConfig } from 'next'
const nextConfig: NextConfig = {
output: 'export',
}
export default nextConfig
پس از Build، فایلهای HTML، CSS و JavaScript استاتیک تولید میشوند.
در این حالت قابلیتهایی که به Runtime سرور نیاز دارند، مانند برخی Route Handlerها، Server Actionها و رندر داینامیک، قابل استفاده نخواهند بود. (nextjs.org)
امکان رندر HTML، مدیریت Metadata، سایتمپ، robots.txt و دادههای ساختاریافته، Next.js را برای پروژههای محتوایی مناسب میکند.
رندر سمت سرور، تولید استاتیک، Streaming، کش، بهینهسازی تصویر و فونت میتوانند به افزایش سرعت کمک کنند.
برای ایجاد مسیرها نیازی به نصب کتابخانه مسیریابی جداگانه ندارید.
میتوانید UI، API، فرمها و بخشی از منطق سرور را در یک پروژه مدیریت کنید.
نکست جی اس پشتیبانی داخلی از TypeScript دارد و با تغییر پسوند فایلها به .ts یا .tsx تنظیمات لازم را ایجاد میکند. (nextjs.org)
Fast Refresh، ساختار مشخص پروژه، خطاهای توسعه و ابزارهای داخلی باعث میشوند فرایند توسعه منظمتر باشد.
میتوانید برای بخشهای مختلف یک پروژه از محتوای استاتیک، کششده یا داینامیک استفاده کنید.
یادگیری Server Component، Client Component، کش، Streaming، Server Action و روشهای رندرینگ در ابتدا ساده نیست.
برخی APIها و روشهای پیشنهادی میان نسخههای اصلی تغییر میکنند. به همین دلیل آموزشهای قدیمی ممکن است با رفتار نسخههای جدید هماهنگ نباشند.
درک اینکه کدام داده کش شده، چه زمانی Revalidate میشود و کدام بخش داینامیک است، به تجربه نیاز دارد.
برای استفاده کامل از رندر داینامیک، Server Actions و قابلیتهای Runtime به هاست سازگار نیاز دارید.
برای یک صفحه بسیار ساده یا اپلیکیشن کاملاً Client-side ممکن است استفاده از یک ابزار سبکتر کافی باشد.
نکست جی اس انتخاب مناسبی برای پروژههای زیر است:
وجود صفحات عمومی نیازمند سئو در کنار بخشهای تعاملی و پنل کاربری، یکی از شرایطی است که Next.js در آن ارزش زیادی ایجاد میکند.
در شرایط زیر بهتر است گزینههای دیگر را نیز بررسی کنید:
Vite یک ابزار Build و Development Server سریع است. Next.js یک فریمورک کامل React محسوب میشود.
Vite معمولاً برای موارد زیر مناسب است:
Next.js معمولاً برای موارد زیر مناسبتر است:
هیچکدام همیشه بهتر نیستند. انتخاب باید بر اساس نیاز پروژه انجام شود.
برای یادگیری اصولی نکست جی اس میتوانید مسیر زیر را دنبال کنید:
create-next-appبهترین روش یادگیری، ساخت یک پروژه واقعی مانند وبلاگ، فروشگاه ساده یا سیستم مدیریت کارها است.
بله. نکست جی اس بر پایه React ساخته شده است. لازم نیست در React متخصص باشید، اما باید با کامپوننت، Props، State، هوکها و دریافت اطلاعات آشنا باشید.
بله. نکست جی اس ابزارهایی مانند رندر سمت سرور، صفحات استاتیک، Metadata API، سایتمپ، robots.txt و Open Graph را ارائه میدهد. بااینحال موفقیت سئو همچنان به کیفیت محتوا، معماری سایت، لینکسازی و تجربه کاربری بستگی دارد.
خیر. با Route Handler، Server Action و Server Component میتوان منطق سمت سرور نیز ایجاد کرد. بااینحال در پروژههای پیچیده ممکن است بکاند مستقل همچنان گزینه بهتری باشد.
برای پروژههای جدید معمولاً App Router انتخاب پیشنهادی است؛ زیرا از قابلیتهای جدید React مانند Server Components پشتیبانی میکند. Pages Router برای نگهداری پروژههای قدیمی همچنان پشتیبانی میشود. (nextjs.org)
خیر. میتوانید از JavaScript استفاده کنید؛ اما TypeScript در پروژههای متوسط و بزرگ به کاهش خطاها و افزایش خوانایی کد کمک میکند.
تنها زمانی که هاست از Node.js و نیازهای نسخه مورد استفاده پشتیبانی کند. در غیر این صورت باید از خروجی استاتیک استفاده کنید یا پروژه را روی سرور و پلتفرم سازگار قرار دهید.
بله. در App Router میتوان با فایل route.ts Route Handler ساخت. در Pages Router نیز API Routes وجود دارند.
خیر. Node.js محیط اجرای JavaScript روی سرور است، درحالیکه Next.js فریمورکی است که میتواند روی محیط Node.js اجرا شود.
بله. امکان تولید صفحات محصول، مدیریت متادیتا، رندر سمت سرور، کش، API، احراز هویت و اتصال به درگاه پرداخت، آن را برای فروشگاه مناسب میکند. بااینحال معماری پروژه باید متناسب با تعداد محصولات، ترافیک و نیازهای تجاری طراحی شود.
نکست جی اس یک فریمورک قدرتمند مبتنی بر React برای ساخت وبسایتها و اپلیکیشنهای مدرن است. این فریمورک مسیریابی، رندر سمت سرور، تولید صفحات استاتیک، Server Components، ساخت API، مدیریت فرم، کش، بهینهسازی تصویر، مدیریت فونت و ابزارهای سئو را در یک ساختار یکپارچه ارائه میدهد.
مهمترین نکته در یادگیری Next.js این است که تنها دستورها و نام فایلها را حفظ نکنید. باید تفاوت اجرای کد روی سرور و مرورگر، روشهای رندرینگ، رفتار کش و نحوه انتقال داده میان کامپوننتها را بهدرستی درک کنید.
برای پروژههای جدید، App Router نقطه شروع مناسبی است. بهتر است ابتدا یک پروژه کوچک بسازید و سپس قابلیتهایی مانند دیتابیس، احراز هویت، Server Actions، کش و سئو را مرحلهبهمرحله به آن اضافه کنید.
در نهایت، نکست جی اس زمانی بهترین نتیجه را ایجاد میکند که قابلیتهای آن متناسب با نیاز واقعی پروژه استفاده شوند. تبدیل غیرضروری کامپوننتها به Client Component، استفاده بیدلیل از رندر داینامیک و پیکربندی نادرست کش میتواند مزایای این فریمورک را کاهش دهد.
این نسخه برای یک وبلاگ آموزشی عمومی آماده شده است؛ افزودن نام برند، لینکهای داخلی، تصاویر اختصاصی و مثالهای متناسب با خدمات سایت، آن را برای انتشار نهایی کاملتر میکند.