خانه / مستندات / Next JS / مقدمه و نصب / نصب دستی

نصب دستی

برای راه‌اندازی دستی یک پروژه جدید Next.js، ابتدا باید بسته‌های (Packages) اصلی و مورد نیاز را در محیط پروژه خود نصب کنید.

نصب بسته‌های اصلی

ترمبیتال خود را باز کرده و دستور زیر را جهت نصب آخرین نسخه پایدار از سه بسته حیاتی فریم‌ورک اجرا کنید:

npm i next@latest react@latest react-dom@latest

نکات فنی مهم:

معماری جدید App Router به طور پیش‌فرض از نسخه‌های React Canary استفاده می‌کند. این نسخه‌ها شامل تمامی قابلیت‌های پایدار React 19 به همراه ویژگی‌های جدیدتر فریم‌ورک هستند. با این حال، همچنان باید نام react و react-dom را در فایل package.json جهت سازگاری با ابزارها (Tooling) و اکوسیستم توسعه قید کنید.

معماری قدیمی Pages Router دقیقاً از همان نسخه React که در فایل package.json پروژه شما تعریف شده است، استفاده می‌کند.

پیکربندی اسکریپت‌ها (Scripts Configuration)

پس از نصب بسته‌ها، فایل package.json پروژه خود را باز کرده و اسکریپت‌های زیر را به آن اضافه کنید تا فرآیند توسعه و بیلد سیستم مدیریت شود:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint",
    "lint:fix": "eslint --fix"
  }
}

وظایف هر اسکریپت در چرخه توسعه

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

next dev: سرور توسعه (Development Server) را با استفاده از Turbopack (باندلر پیش‌فرض و فوق‌سریع) راه‌اندازی می‌کند.
next build: کدهای برنامه را برای محیط عملیاتی و نهایی (Production) بهینه‌سازی و بیلد می‌کند.
next start: سرور بهینه‌شده عملیاتی را روشن و آماده پاسخگویی می‌کند.
eslint: کدهای پروژه را جهت یافتن خطاهای ساختاری و نگارشی بررسی می‌کند.

تغییر باندلر پیش‌فرض: اکنون ابزار Turbopack باندلر اصلی Next.js است. در صورتی که تمایل دارید از Webpack استفاده کنید، باید فلگ مربوطه را به شکل next dev --webpack یا next build --webpack اجرا نمایید.

ساخت پوشه برنامه (Create the app directory)

سیستم مسیردهی در فریم‌ورک Next.js بر پایه ساختار فایل‌سیستم (File-System Routing) استوار است؛ یعنی پوشه‌ها و فایل‌های شما، آدرس‌های اینترنتی (Routes) برنامه را مشخص می‌کنند.

۱. ساخت لایه ریشه (Root Layout)

ابتدا یک پوشه به نام app در ریشه پروژه بسازید. سپس داخل آن، فایلی به نام layout.tsx ایجاد کنید. این فایل، لایه اصلی و ریشه کل برنامه (Root Layout) است، وجود آن الزامی است و باید شامل تگ‌های پایه <html> و <body> باشد:

// app/layout.tsx
export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  )
}

۲. ساخت صفحه اصلی (Home Page)

برای تعریف محتوای صفحه اصلی، فایلی به نام page.tsx درون پوشه app ایجاد کرده و کد زیر را در آن بنویسید:

// app/page.tsx
export default function Page() {
  return <h1>Hello, Next.js!</h1>
}

هنگامی که کاربر ریشه برنامه یا همان آدرس (/) را باز می‌کند، هر دو فایل layout.tsx و page.tsx به صورت ترکیب‌شده رندر خواهند شد.

نکات کاربردی:

اگر فراموش کنید فایل layout.tsx ریشه را بسازید، Next.js در زمان اجرای سرور توسعه با دستور next dev، این فایل را به صورت خودکار برای شما ایجاد خواهد کرد.

در صورت تمایل می‌توانید یک پوشه به نام src در ریشه پروژه ایجاد کرده و پوشه app را به درون آن منتقل کنید تا کدهای اصلی برنامه از فایل‌های تنظیمات محیطی (Configuration Files) تفکیک شوند.

ساخت پوشه دارایی‌های ثابت (Create the public folder)

این مرحله اختیاری است. یک پوشه به نام public در ریشه پروژه خود بسازید تا فایل‌های استاتیک مانند تصاویر، فونت‌ها و موارد مشابه را در آن نگهداری کنید. فایل‌های موجود در این پوشه مستقیماً از طریق آدرس پایه یا ریشه (/) در دسترس خواهند بود.

به عنوان مثال، تصویری که در مسیر public/profile.png قرار دارد، در کدهای شما با آدرس /profile.png قابل فراخوانی است:

// app/page.tsx
import Image from 'next/image'
 
export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />
}

این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.

ترجمه شده از منبع: https://nextjs.org/docs/app