مقدمه
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 است که توسعه را سریعتر و ساختارمندتر میکنند.