Next.js
شروع کردن
نصب و راه اندازی

نصب و راه اندازی

سیستم مورد نیاز :

نصب خودکار

ما توصیه می‌کنیم برنامه Next.js خود را با استفاده از دستور create-next-app راه‌اندازی کنید، این ابزار به صورت خودکار تمام موارد مورد نیاز را برای شما تنظیم می‌کند. برای ایجاد یک پروژه جدید، دستور زیر را در ترمینال خود اجرا کنید :

Terminal
npx create-next-app@latest

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

Terminal
What is your project named? 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? (recommended) No / Yes
Would you like to customize the default import alias (@/*)? No / Yes
What import alias would you like configured? @/*

پس از پاسخ به سوالات، create-next-app یک پوشه با نام پروژه شما ایجاد کرده و وابستگی‌های مورد نیاز را نصب خواهد کرد.

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

خوب است بدانید:

  • Next.js اکنون به طور پیش فرض با پیکربندی‌های TypeScript، ESLint و Tailwind CSS عرضه می‌شود.
  • به طور اختیاری می‌توانید از یک پوشه src در ریشه پروژه خود برای جداسازی کد برنامه از فایل‌های پیکربندی استفاده کنید.

نصب دستی

برای ایجاد دستی یک برنامه Next.js جدید، بسته‌های مورد نیاز را نصب کنید:

Terminal
npm install next@latest react@latest react-dom@latest

فایل package.json خود را باز کنید و scripts زیر را اضافه کنید:

package.json
{
	"scripts": {
		"dev": "next dev",
		"build": "next build",
		"start": "next start",
		"lint": "next lint"
	}
}

این اسکریپت‌ها به مراحل مختلف توسعه یک اپلیکیشن اشاره می‌کنند:

  • dev : دستور next dev را اجرا می‌کند تا Next.js را در حالت توسعه راه‌اندازی کند.
  • build : دستور next build را اجرا می‌کند تا برنامه را برای استفاده در محیط عملیاتی (production) کامپایل کند.
  • start : دستور next start را اجرا می‌کند تا یک سرور Next.js برای محیط عملیاتی راه‌اندازی کند.
  • lint : دستور next lint را اجرا می‌کند تا از پیکربندی داخلی ESLint در Next.js برای بررسی و رفع خطاهای کد استفاده کند.

ایجاد دایرکتوری (پوشه) ها

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

پوشه app

برای برنامه‌های جدید، استفاده از مسیریاب App را توصیه می‌کنیم. این مسیریاب به شما امکان می‌دهد از جدیدترین ویژگی‌های React استفاده کنید و بر اساس بازخورد جامعه، تکامل‌یافته‌ی مسیریاب صفحات (Pages Router) است.

نکته: در این مستندات ما فقط بخش های مربوط به مسیریاب برنامه (App Router) رو آموزش میدیم، چرا که هدف ما آموزش Next.js نسخه +13 به بعد هست.

برای رندر شدن محتوا در ریشه برنامه‌ی (/) Next.js، یک پوشه به نام app/ ایجاد کنید و سپس دو فایل layout.tsx و page.tsx را به آن اضافه کنید.


ساختار پوشه Appساختار پوشه App

یک طرح بندی ریشه (root layout) داخل فایل app/layout.tsx با تگ‌های الزامی <html> و <body> ایجاد کنید:

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

در نهایت، یک صفحه اصلی به نام app/page.tsx با مقداری محتوای اولیه ایجاد کنید:

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

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

در این باره بیشتر بدانید استفاده از App Router.

پوشه pages (اختیاری)

اگر به جای استفاده از مسیریاب App ، ترجیح می‌دهید از مسیریاب صفحات (Pages Router) استفاده کنید، می‌توانید پوشه‌ای به نام pages/ در ریشه پروژه خود ایجاد کنید.

سپس یک فایل index.tsx در داخل پوشه pages اضافه کنید. این فایل، صفحه اصلی وبسایت شما (/) خواهد بود.

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

نکته: در این مستندات ما فقط بخش های مربوط به مسیریاب برنامه (App Router) رو آموزش میدیم، چرا که هدف ما آموزش Next.js نسخه +13 به بعد هست. پس ادامه این بخش را ذکر نمی کنیم.

next.js ، برای تعریف چیدمان کلی برنامه، یک فایل با نام _app.tsx داخل پوشه pages/ اضافه کنید. برای اطلاعات بیشتر در مورد فایل‌های برنامه سفارشی، به مستندات Next.js مراجعه کنید.

pages/_app.tsx
import type { AppProps } from 'next/app'
 
export default function App({ Component, pageProps }: AppProps) {
	return <Component {...pageProps} />
}

نهایتا، برای کنترل پاسخ اولیه از سرور، یک فایل با نام _document.tsx داخل پوشه pages/ اضافه کنید. برای اطلاعات بیشتر در مورد فایل سند سفارشی، به مستندات Next.js مراجعه کنید.

pages/_document.tsx
import { Html, Head, Main, NextScript } from 'next/document'
 
export default function Document() {
	return (
		<Html>
			<Head />
			<body>
				<Main />
				<NextScript />
			</body>
		</Html>
	)
}

درباره استفاده از مسیریاب صفحات بیشتر بیاموزید.

خوب است بدانید: با اینکه می‌تونین از هر دو روتر در یک پروژه استفاده کنین، مسیرهای تعریف شده در پوشه app اولویت دارن. برای پروژه‌های جدید توصیه می‌شه فقط از یک روتر استفاده کنین تا از سردرگمی جلوگیری بشه.

پوشه public (اختیاری)

برای ذخیره منابع استاتیک مانند تصاویر، فونت‌ها و غیره، پوشه ای به نام public ایجاد کنید. فایل‌های داخل پوشه public بعدا می‌توانند توسط کد شما با یک اسلش ابتدایی (/) به عنوان آدرس پایه، فراخوانی شوند.

راه‌اندازی سرور توسعه

  1. برای راه‌اندازی سرور توسعه، دستور npm run dev را اجرا کنید.
  2. برای مشاهده‌ی اپلیکیشن به آدرس http://localhost:3000 در مرورگر خود مراجعه کنید.
  3. هر تغییری که در فایل app/page.tsx (یا pages/index.tsx) اعمال کنید و ذخیره کنید، نتیجه‌ی به‌روزرسانی شده را در مرورگر خود مشاهده خواهید کرد.
معرفیساختار پروژه (Structure)