آموزش نصب Next.js از صفر تا اجرا + راه‌اندازی پروژه واقعی

در چند سال اخیر توسعه وب مدرن تغییرات بسیار زیادی داشته است. کاربران انتظار دارند صفحات وب سریع‌تر، بهینه‌تر و تجربه کاربری روان‌تری داشته باشند. در چنین شرایطی، استفاده از کتابخانه‌ها و فریم‌ورک‌هایی که بتوانند عملکرد بالا، سئو مناسب و تجربه توسعه بهتر را فراهم کنند، اهمیت زیادی پیدا کرده است.

یکی از محبوب‌ترین ابزارها در دنیای فرانت‌اند، Next.js است؛ فریم‌ورکی قدرتمند که بر پایه React ساخته شده و امکاناتی مانند رندر سمت سرور (SSR)، تولید صفحات استاتیک (SSG)، مسیریابی پیشرفته، بهینه‌سازی تصاویر، API Route و بسیاری قابلیت‌های دیگر را در اختیار برنامه‌نویسان قرار می‌دهد.

اگر با React کار کرده باشید، احتمالاً متوجه شده‌اید که برای ساخت یک پروژه واقعی نیاز به تنظیمات مختلفی مانند مدیریت Route، بهینه‌سازی SEO، تنظیمات Build و موارد دیگر دارید. Next.js بسیاری از این مشکلات را به‌صورت پیش‌فرض حل کرده و به همین دلیل امروزه توسط شرکت‌ها و توسعه‌دهندگان حرفه‌ای در پروژه‌های واقعی استفاده می‌شود.

در این مقاله قصد داریم به‌صورت کامل یاد بگیریم چگونه Next.js را نصب کنیم، اولین پروژه خود را بسازیم و محیط توسعه را آماده شروع برنامه‌نویسی کنیم.

این آموزش برای افرادی مناسب است که:

• قصد شروع یادگیری Next.js را دارند.
• با React آشنایی اولیه دارند.
• می‌خواهند وارد توسعه وب مدرن شوند.
• قصد ساخت پروژه‌های حرفه‌ای و سئو شده دارند.

Next.js چیست؟

Next.js یک فریم‌ورک Full-Stack مبتنی بر React است که توسط شرکت Vercel توسعه داده شده است. این فریم‌ورک امکانات بیشتری نسبت به React خام ارائه می‌دهد و فرآیند ساخت برنامه‌های وب مدرن را ساده‌تر می‌کند.

React به‌تنهایی فقط یک کتابخانه برای ساخت رابط کاربری است. یعنی وظیفه اصلی آن ساخت Componentها و مدیریت بخش View برنامه است. اما برای ساخت یک پروژه کامل، معمولاً به ابزارهای دیگری مانند:

• React Router برای مدیریت مسیرها
• ابزارهای SEO
• تنظیمات Webpack یا Bundler
• راهکارهای مدیریت رندرینگ
• بهینه‌سازی تصاویر

نیاز خواهید داشت.

Next.js بسیاری از این قابلیت‌ها را به‌صورت داخلی در اختیار شما قرار می‌دهد.

به زبان ساده:

React به شما ابزار ساخت رابط کاربری می‌دهد، اما Next.js یک محیط کامل برای ساخت اپلیکیشن‌های حرفه‌ای فراهم می‌کند.

مهم‌ترین ویژگی‌های Next.js

Next.js امکانات زیادی دارد که باعث محبوبیت آن شده است. برخی از مهم‌ترین قابلیت‌های این فریم‌ورک عبارت‌اند از:

۱. رندر سمت سرور (Server Side Rendering)

در برنامه‌های React معمولی، معمولاً محتوا ابتدا در مرورگر کاربر تولید می‌شود. این موضوع می‌تواند برای سرعت اولیه بارگذاری و سئو مشکلاتی ایجاد کند.

Next.js با استفاده از SSR می‌تواند HTML صفحه را در سمت سرور تولید کند و سپس به مرورگر ارسال کند.

مزایای SSR:

• سرعت بیشتر بارگذاری اولیه
• عملکرد بهتر در موتورهای جستجو
• تجربه کاربری بهتر

برای سایت‌هایی مانند فروشگاه‌های اینترنتی، وبلاگ‌ها و سایت‌های آموزشی، این قابلیت اهمیت بسیار زیادی دارد.

۲. تولید صفحات استاتیک (Static Site Generation)

یکی دیگر از قابلیت‌های مهم Next.js امکان ساخت صفحات استاتیک است.

در این روش، صفحات سایت هنگام Build پروژه ساخته می‌شوند و هنگام درخواست کاربر، سریعاً نمایش داده می‌شوند.

این ویژگی برای مواردی مانند:

• مقالات آموزشی
• صفحات معرفی محصول
• صفحات فرود (Landing Page)

بسیار کاربردی است.

۳. سیستم Routing داخلی

در React خام معمولاً برای مدیریت صفحات از کتابخانه‌هایی مانند React Router استفاده می‌شود.

اما Next.js یک سیستم Routing داخلی دارد.

برای مثال در نسخه‌های جدید Next.js اگر ساختار زیر را داشته باشید:

app/
 ├── page.js
 ├── about/
 │    └── page.js
 └── courses/
      └── page.js

به‌صورت خودکار مسیرهای زیر ایجاد می‌شوند:

/
 /about
 /courses

بدون اینکه نیاز باشد Route جداگانه تعریف کنید.

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

تصاویر یکی از عوامل مهم در سرعت سایت هستند.

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

• تغییر اندازه خودکار تصاویر
• Lazy Loading
• کاهش حجم تصاویر
• بهینه‌سازی برای دستگاه‌های مختلف

را فراهم می‌کند.

نمونه استفاده:

import Image from "next/image";

export default function Home() {
  return (
    <Image
      src="/profile.jpg"
      width={300}
      height={300}
      alt="Profile Image"
    />
  );
}

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

محبوبیت Next.js اتفاقی نیست. این فریم‌ورک توانسته بسیاری از مشکلات رایج توسعه‌دهندگان React را حل کند.

در ادامه مهم‌ترین دلایل محبوبیت آن را بررسی می‌کنیم.

۱. سئو بهتر نسبت به React معمولی

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

در سایت‌های React معمولی (SPA)، بسیاری از محتواها بعد از اجرای JavaScript در مرورگر ساخته می‌شوند. این موضوع ممکن است برای موتورهای جستجو چالش ایجاد کند.

اما Next.js با استفاده از:

• Server Components
• SSR
• Static Generation
• Metadata API

امکان ساخت صفحات کاملاً بهینه برای موتورهای جستجو را فراهم می‌کند.

برای سایت‌هایی که از طریق گوگل ورودی می‌گیرند، انتخاب Next.js می‌تواند یک مزیت مهم باشد.

۲. تجربه توسعه‌دهندگی بهتر

Next.js بسیاری از تنظیمات پیچیده را حذف کرده است.

به‌عنوان مثال، در یک پروژه React معمولی ممکن است نیاز داشته باشید:

• Router نصب کنید.
• تنظیمات Build انجام دهید.
• SEO را جداگانه مدیریت کنید.
• ابزارهای مختلف اضافه کنید.

اما در Next.js بسیاری از این موارد از ابتدا آماده هستند.

به همین دلیل برنامه‌نویس می‌تواند تمرکز بیشتری روی ساخت قابلیت‌های اصلی پروژه داشته باشد.

۳. استفاده توسط شرکت‌های بزرگ

امروزه بسیاری از شرکت‌های مطرح دنیا از Next.js برای توسعه محصولات خود استفاده می‌کنند.

از جمله کاربردهای این فریم‌ورک می‌توان به موارد زیر اشاره کرد:

• فروشگاه‌های اینترنتی
• داشبوردهای مدیریتی
• وب‌سایت‌های خبری
• پلتفرم‌های آموزشی
• SaaS Applicationها

این موضوع باعث شده یادگیری Next.js برای برنامه‌نویسان فرانت‌اند یک مهارت ارزشمند محسوب شود.

پیش‌نیازهای نصب Next.js

قبل از شروع نصب Next.js باید چند ابزار اولیه را روی سیستم خود آماده کنید.

برای نصب و اجرای Next.js به موارد زیر نیاز دارید:

۱. نصب Node.js

Next.js برای اجرا شدن به محیط Node.js نیاز دارد.

Node.js یک محیط اجرای JavaScript در خارج از مرورگر است که امکان اجرای ابزارهایی مانند:

• npm
• npx
• package managerها

را فراهم می‌کند.

برای بررسی نصب بودن Node.js می‌توانید در Terminal یا Command Prompt دستور زیر را اجرا کنید:

node -v

اگر Node.js نصب باشد، نسخه آن نمایش داده خواهد شد:

v22.x.x

همچنین برای بررسی npm:

npm -v

خروجی مشابه زیر مشاهده می‌کنید:

10.x.x

نصب Node.js

برای نصب Node.js بهتر است همیشه از نسخه‌های LTS استفاده کنید.

نسخه‌های LTS یا Long Term Support نسخه‌هایی هستند که مدت طولانی پشتیبانی می‌شوند و برای توسعه پروژه‌های واقعی پیشنهاد می‌شوند.

برای دانلود Node.js می‌توانید از سایت رسمی آن استفاده کنید:

دانلود Node.js از سایت رسمی

بعد از دانلود، مراحل نصب بسیار ساده است:

1. فایل نصب Node.js را اجرا کنید.
2. گزینه‌های پیش‌فرض را تغییر ندهید.
3. اجازه دهید npm نیز همراه Node.js نصب شود.
4. پس از پایان نصب، Terminal را باز کنید.
5. دستورات زیر را اجرا کنید:

node -v

و:

npm -v

اگر نسخه‌ها نمایش داده شدند، محیط شما آماده نصب Next.js است.

ساخت اولین پروژه Next.js با create-next-app

بعد از اینکه Node.js را روی سیستم خود نصب کردید، اکنون آماده هستید اولین پروژه Next.js خود را ایجاد کنید.

تیم توسعه Next.js یک ابزار رسمی به نام create-next-app ارائه کرده است که ساخت پروژه جدید را بسیار ساده می‌کند.

این ابزار به‌صورت خودکار:

• آخرین نسخه Next.js را نصب می‌کند.
• تنظیمات اولیه پروژه را انجام می‌دهد.
• وابستگی‌های مورد نیاز را اضافه می‌کند.
• ساختار استاندارد پروژه را ایجاد می‌کند.

برای ساخت پروژه جدید ابتدا Terminal یا Command Prompt را باز کنید و دستور زیر را اجرا کنید:

npx create-next-app@latest

دستور npx به شما اجازه می‌دهد یک پکیج npm را بدون نصب دائمی اجرا کنید.

بعد از اجرای دستور، چند سؤال از شما پرسیده می‌شود.

تنظیمات اولیه هنگام نصب Next.js

در نسخه‌های جدید Next.js هنگام ساخت پروژه با گزینه‌های مختلفی روبه‌رو می‌شوید.

به‌عنوان مثال:

✔ What is your project named?

در این مرحله باید نام پروژه خود را وارد کنید.

مثلاً:

next-learning-project

سپس Next.js درباره استفاده از TypeScript سؤال می‌کند:

✔ Would you like to use TypeScript?

اگر قصد دارید در پروژه‌های حرفه‌ای کار کنید، پیشنهاد می‌شود گزینه Yes را انتخاب کنید.

TypeScript باعث می‌شود:

• خطاهای برنامه‌نویسی زودتر شناسایی شوند.
• کدنویسی امن‌تر شود.
• نگهداری پروژه‌های بزرگ ساده‌تر شود.

اما اگر در ابتدای مسیر یادگیری هستید، JavaScript نیز انتخاب مناسبی است.

مرحله بعد مربوط به ESLint است:

✔ Would you like to use ESLint?

پیشنهاد می‌شود این گزینه را فعال کنید.

ESLint یک ابزار بررسی کیفیت کد است که اشتباهات رایج را قبل از اجرای پروژه به شما نمایش می‌دهد.

سپس درباره استفاده از Tailwind CSS سؤال می‌شود:

✔ Would you like to use Tailwind CSS?

برای توسعه رابط‌های کاربری مدرن، انتخاب Tailwind CSS بسیار پیشنهاد می‌شود.

Tailwind باعث می‌شود بدون نوشتن فایل‌های CSS طولانی، رابط‌های کاربری سریع‌تر طراحی کنید.

در نسخه‌های جدید Next.js سؤال مهمی درباره App Router وجود دارد:

✔ Would you like your code inside a src/ directory?

و:

✔ Would you like to use App Router?

امروزه App Router روش پیشنهادی Next.js است و بهتر است آن را فعال کنید.

در نهایت ساختار پروژه شما ایجاد خواهد شد.

یک نمونه تنظیم پیشنهادی برای شروع:

✔ TypeScript: Yes
✔ ESLint: Yes
✔ Tailwind CSS: Yes
✔ src directory: Yes
✔ App Router: Yes

اجرای اولین پروژه Next.js

بعد از پایان نصب، وارد پوشه پروژه شوید.

اگر نام پروژه شما:

next-learning-project

باشد، دستور زیر را اجرا کنید:

cd next-learning-project

حالا باید وابستگی‌های پروژه نصب شده باشند.

برای اجرای پروژه در حالت توسعه:

npm run dev

پس از اجرا، خروجی مشابه زیر مشاهده می‌کنید:

▲ Next.js 16.x.x

- Local: http://localhost:3000
- Network: http://192.168.x.x:3000

اکنون مرورگر خود را باز کنید و آدرس زیر را وارد کنید:

http://localhost:3000

اگر همه چیز درست باشد، صفحه پیش‌فرض Next.js نمایش داده می‌شود.

تبریک!

شما اولین پروژه Next.js خود را ایجاد و اجرا کرده‌اید.

بررسی دستورات مهم Next.js

در فایل package.json پروژه، چند دستور مهم وجود دارد:

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

هرکدام کاربرد خاصی دارند.

دستور dev

npm run dev

برای توسعه پروژه استفاده می‌شود.

ویژگی‌های این حالت:

• فعال بودن Hot Reload
• مشاهده سریع تغییرات
• مناسب برنامه‌نویسی روزانه

در زمان کدنویسی تقریباً همیشه از این دستور استفاده خواهید کرد.

دستور build

npm run build

قبل از انتشار پروژه باید آن را Build کنید.

این دستور:

• کدها را بررسی می‌کند.
• صفحات را بهینه می‌کند.
• فایل‌های نهایی Production را ایجاد می‌کند.

دستور start

npm run start

بعد از Build برای اجرای نسخه نهایی استفاده می‌شود.

مثلاً روی سرور:

npm run build

npm run start

بررسی ساختار پوشه‌های پروژه Next.js

بعد از نصب Next.js، ساختار پروژه معمولاً مشابه زیر است:

next-learning-project

├── node_modules
├── public
├── src
│   └── app
│       ├── favicon.ico
│       ├── globals.css
│       ├── layout.js
│       └── page.js
│
├── package.json
├── package-lock.json
├── next.config.js
├── tsconfig.json
└── eslint.config.js

در ادامه مهم‌ترین بخش‌ها را بررسی می‌کنیم.

پوشه node_modules

این پوشه شامل تمام کتابخانه‌ها و وابستگی‌هایی است که پروژه برای اجرا نیاز دارد.

به‌عنوان مثال:

• Next.js
• React
• React DOM
• ابزارهای توسعه

این پوشه معمولاً داخل Git قرار نمی‌گیرد.

به همین دلیل در فایل:

.gitignore

قرار داده شده است.

پوشه public

برای قرار دادن فایل‌های عمومی استفاده می‌شود.

مانند:

• تصاویر
• آیکون‌ها
• فایل‌های استاتیک

مثلاً:

public/
 ├── logo.png
 └── banner.jpg

برای استفاده:

<img src="/logo.png" alt="Logo" />

پوشه app

در نسخه‌های جدید Next.js، پوشه اصلی توسعه معمولاً app است.

این پوشه مربوط به App Router است.

مثلاً:

app/
 ├── page.js
 ├── about/
 │   └── page.js
 └── blog/
     └── page.js

ساختار بالا باعث ایجاد صفحات زیر می‌شود:

/
 /about
 /blog

فایل page.js

هر فایل page.js یک صفحه از سایت است.

مثلاً:

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

این فایل صفحه اصلی سایت را ایجاد می‌کند.

فایل layout.js

Layout برای ساخت قالب مشترک صفحات استفاده می‌شود.

مثلاً بخش‌هایی مانند:

• Header
• Footer
• فونت‌ها
• Metadata

معمولاً در Layout قرار می‌گیرند.

نمونه:

export const metadata = {
  title: "My Next.js Website",
  description: "Learning Next.js"
};

export default function RootLayout({ children }) {
  return (
    <html lang="fa">
      <body>
        {children}
      </body>
    </html>
  );
}

فایل globals.css

این فایل شامل استایل‌های عمومی پروژه است.

مانند:

• تنظیمات Body
• فونت‌ها
• کلاس‌های عمومی CSS

مثلاً:

body {
  margin: 0;
  font-family: Arial;
}

فایل next.config.js

برای تنظیمات اصلی Next.js استفاده می‌شود.

مثلاً:

• تنظیم دامنه تصاویر
• تغییر تنظیمات Build
• تنظیمات آزمایشی

نمونه:

const nextConfig = {
  images: {
    domains: [
      "example.com"
    ]
  }
};

module.exports = nextConfig;

تفاوت App Router و Pages Router در Next.js

یکی از مهم‌ترین تغییرات Next.js در نسخه‌های جدید، معرفی App Router است.

قبل از نسخه ۱۳، بیشتر پروژه‌ها از Pages Router استفاده می‌کردند.

اما در نسخه‌های جدید، App Router روش اصلی و پیشنهادی Next.js محسوب می‌شود.

Pages Router چیست؟

در روش قدیمی، صفحات داخل پوشه:

pages

قرار می‌گرفتند.

مثلاً:

pages/

├── index.js
├── about.js
└── contact.js

خروجی:

/
 /about
 /contact

App Router چیست؟

در App Router ساختار بر اساس پوشه‌ها و فایل‌های مخصوص مانند:

page.js
layout.js
loading.js
error.js

است.

مثلاً:

app/

├── page.js

├── products
│   └── page.js

└── dashboard
    └── page.js

چرا App Router پیشنهاد می‌شود؟

App Router امکانات مدرن‌تری دارد:

Server Components

کامپوننت‌ها به‌صورت پیش‌فرض در سمت سرور اجرا می‌شوند.

مزایا:

• حجم JavaScript کمتر در مرورگر
• سرعت بهتر
• امنیت بالاتر

Streaming

امکان نمایش تدریجی بخش‌های صفحه را فراهم می‌کند.

مدیریت بهتر Layout

در پروژه‌های بزرگ می‌توانید Layoutهای تو در تو داشته باشید.

برای پروژه‌های جدید، پیشنهاد می‌شود از App Router استفاده کنید؛ مگر اینکه روی پروژه قدیمی کار می‌کنید که با Pages Router ساخته شده است.

رایج‌ترین خطاهای نصب Next.js و راه‌حل آن‌ها

در هنگام نصب و راه‌اندازی Next.js ممکن است با خطاهای مختلفی مواجه شوید. بسیاری از این خطاها به دلیل تنظیمات محیط توسعه، نسخه Node.js یا مشکلات مربوط به پکیج‌ها ایجاد می‌شوند.

در ادامه رایج‌ترین مشکلات نصب Next.js را بررسی می‌کنیم.

خطای عدم شناسایی Node.js یا npm

یکی از رایج‌ترین مشکلات در شروع کار این است که بعد از نصب Node.js، هنگام اجرای دستور:

node -v

با خطایی مانند زیر مواجه شوید:

'node' is not recognized as an internal or external command

یا:

command not found: node

دلیل خطا

معمولاً یکی از موارد زیر باعث این مشکل می‌شود:

• Node.js به‌درستی نصب نشده است.
• مسیر Node.js به Environment Variable اضافه نشده است.
• Terminal قبل از نصب Node.js باز بوده است.

راه‌حل

ابتدا Terminal را کاملاً ببندید و دوباره باز کنید.

اگر مشکل حل نشد:

1. Node.js را حذف کنید.
2. آخرین نسخه LTS را دوباره نصب کنید.
3. سیستم را Restart کنید.

سپس دوباره بررسی کنید:

node -v
npm -v

خطای ناسازگاری نسخه Node.js با Next.js

گاهی هنگام نصب Next.js ممکن است خطایی مشابه زیر دریافت کنید:

You are using Node.js 16.x.
Next.js requires Node.js version >= 18

دلیل خطا

نسخه‌های جدید Next.js معمولاً به نسخه‌های جدیدتر Node.js نیاز دارند.

استفاده از نسخه قدیمی Node.js می‌تواند باعث مشکلاتی مانند:

• خطا هنگام Build
• نصب نشدن Packageها
• مشکلات Runtime

شود.

راه‌حل

نسخه Node.js خود را بررسی کنید:

node -v

سپس در صورت نیاز Node.js را به نسخه LTS جدید ارتقا دهید.

برای مدیریت چند نسخه Node.js می‌توانید از ابزارهایی مانند NVM استفاده کنید.

بعد از نصب NVM:

nvm install 22

nvm use 22

خطای npm install

گاهی هنگام نصب Packageها با دستور:

npm install

خطاهایی مانند زیر مشاهده می‌شود:

npm ERR!
unable to resolve dependency tree

علت‌های احتمالی

• ناسازگاری نسخه Packageها
• خراب شدن Cache npm
• مشکل در فایل package-lock.json

راه‌حل اول: پاک کردن Cache

npm cache clean --force

سپس:

npm install

راه‌حل دوم: حذف node_modules

ابتدا پوشه:

node_modules

را حذف کنید.

همچنین فایل:

package-lock.json

را پاک کنید.

سپس:

npm install

را اجرا کنید.

خطای Port 3000 در حال استفاده است

هنگام اجرای:

npm run dev

ممکن است با پیام زیر روبه‌رو شوید:

Port 3000 is already in use

دلیل خطا

یک برنامه دیگر قبلاً از پورت 3000 استفاده می‌کند.

مثلاً:

• یک پروژه Next.js دیگر
• یک برنامه Node.js
• یک سرور محلی

راه‌حل اول

اجرای Next.js روی پورت دیگر:

npm run dev -- -p 3001

حالا پروژه روی:

http://localhost:3001

اجرا می‌شود.

راه‌حل دوم

بستن Process استفاده‌کننده از پورت

در ویندوز:

netstat -ano | findstr :3000

سپس Process مربوطه را ببندید.

در لینوکس:

lsof -i :3000

خطای Permission هنگام نصب

در سیستم‌عامل‌هایی مانند Linux یا macOS ممکن است خطایی مشابه زیر دیده شود:

EACCES permission denied

دلیل

کاربر اجازه نوشتن در مسیر نصب npm را ندارد.

راه‌حل

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

sudo npm install

بهتر است مشکل Permission را اصولی حل کنید.

استفاده از NVM یکی از بهترین روش‌ها است؛ زیرا Node.js را در فضای کاربر نصب می‌کند.

خطای Build در Next.js

گاهی پروژه در حالت توسعه اجرا می‌شود اما هنگام Build با خطا مواجه می‌شود:

npm run build

دلایل رایج:

• خطای TypeScript
• استفاده اشتباه از Server Component
• Import اشتباه
• مشکل در Environment Variableها

برای پیدا کردن مشکل، خروجی Terminal را دقیق بررسی کنید.

Next.js معمولاً مسیر فایل و خط مشکل‌دار را نمایش می‌دهد.

نکات مهم قبل از شروع توسعه با Next.js

نصب Next.js تنها اولین مرحله است. برای اینکه بتوانید پروژه‌های حرفه‌ای بسازید، بهتر است چند نکته مهم را از ابتدا رعایت کنید.

۱. ابتدا React را یاد بگیرید

Next.js بر پایه React ساخته شده است.

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

• Component
• Props
• State
• Hooks
• Event Handling
• Conditional Rendering
• React Lifecycle

اگر بدون یادگیری React وارد Next.js شوید، احتمالاً در مفاهیمی مانند:

• Server Component
• Client Component
• Data Fetching

دچار مشکل خواهید شد.

۲. ساختار پروژه را از ابتدا اصولی طراحی کنید

در پروژه‌های واقعی بهتر است از همان ابتدا نظم مناسبی داشته باشید.

برای مثال:

src
|
├── app
|
├── components
|
├── hooks
|
├── services
|
├── utils
|
└── styles

این ساختار باعث می‌شود توسعه پروژه‌های بزرگ ساده‌تر شود.

۳. با Git کار کنید

هر برنامه‌نویس حرفه‌ای باید مدیریت نسخه را یاد بگیرد.

قبل از شروع پروژه:

git init

سپس:

git add .

git commit -m "Initial project setup"

استفاده از Git به شما کمک می‌کند:

• تغییرات را مدیریت کنید.
• نسخه‌های قبلی را بازگردانید.
• تیمی کار کنید.

۴. مفهوم Server Component و Client Component را یاد بگیرید

در Next.js جدید، همه Componentها به‌صورت پیش‌فرض Server Component هستند.

برای استفاده از قابلیت‌های مرورگر مانند:

• useState
• useEffect
• Eventها

باید Component را Client کنید.

مثال:

"use client";

import { useState } from "react";

export default function Counter(){

  const [count,setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      {count}
    </button>
  );
}

۵. از ابتدا به SEO توجه کنید

یکی از مهم‌ترین مزیت‌های Next.js، امکانات سئو است.

برای صفحات خود Metadata تعریف کنید:

export const metadata = {
  title: "آموزش Next.js",
  description: "یادگیری Next.js از صفر تا حرفه‌ای"
};

این کار باعث می‌شود موتورهای جستجو اطلاعات بهتری از صفحات شما دریافت کنند.