LogoENEnglish

نصب و راه‌اندازی پروژه Next.js – شروع سریع با TypeScript، Tailwind و App Router

در این مقاله، نحوهٔ نصب و راه‌اندازی یک پروژه جدید با Next.js را بررسی می‌کنیم. با استفاده از دستور create-next-app، می‌توان پروژه‌ای با تنظیمات پیش‌فرض شامل TypeScript، Tailwind CSS، App Router و Turbopack ایجاد کرد. همچنین به ساختار پوشه‌ها، تنظیمات TypeScript، ESLint، و استفاده از import alias برای مسیرهای مطلق می‌پردازیم.

Next.jscreate-next-appTypeScriptTurbopack

~2 دقیقه مطالعه • بروزرسانی ۳ آبان ۱۴۰۴

مقدمه


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


شروع سریع با create-next-app


برای ایجاد پروژه جدید، کافی است دستور زیر را در ترمینال اجرا کنید:


pnpm create next-app@latest my-app --yes
cd my-app
pnpm dev

این دستور پروژه‌ای با تنظیمات پیش‌فرض شامل TypeScript، Tailwind CSS، App Router و Turbopack ایجاد می‌کند.


ساختار پوشه‌ها و فایل‌های اولیه


Next.js از سیستم مسیریابی مبتنی بر فایل استفاده می‌کند. برای شروع، پوشه app را ایجاد کرده و فایل‌های زیر را اضافه کنید:


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

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

استفاده از پوشه public


برای ذخیره فایل‌های استاتیک مانند تصاویر، پوشه public را در ریشه پروژه ایجاد کنید. سپس می‌توانید فایل‌ها را با مسیر / فراخوانی کنید:


import Image from 'next/image';

export default function Page() {
  return <Image src="/profile.png" alt="Profile" width={100} height={100} />;
}

تنظیمات TypeScript و ESLint


Next.js به‌صورت پیش‌فرض از TypeScript پشتیبانی می‌کند. کافی است یک فایل را به .ts یا .tsx تغییر دهید تا تنظیمات لازم به‌صورت خودکار اضافه شوند.


برای lint کردن کدها، می‌توانید از ESLint یا Biome استفاده کنید:


// ESLint
"scripts": {
  "lint": "eslint",
  "lint:fix": "eslint --fix"
}

// Biome
"scripts": {
  "lint": "biome check",
  "format": "biome format --write"
}

استفاده از import alias


برای ساده‌سازی مسیرهای import، می‌توانید از @/ به‌عنوان alias استفاده کنید. تنظیمات زیر را در فایل tsconfig.json یا jsconfig.json اضافه کنید:


{
  "compilerOptions": {
    "baseUrl": "src/",
    "paths": {
      "@/components/*": ["components/*"],
      "@/styles/*": ["styles/*"]
    }
  }
}

جمع‌بندی


با استفاده از create-next-app و تنظیمات پیش‌فرض، می‌توان به‌سرعت یک پروژه Next.js مدرن راه‌اندازی کرد. این پروژه شامل ابزارهای قدرتمندی مانند TypeScript، Tailwind، App Router و Turbopack است که توسعه را سریع‌تر و ساختارمندتر می‌کنند.


نوشته و پژوهش شده توسط دکتر شاهین صیامی

Next Article