قسمت اول -آشنایی اولیه با Next.js
راه اندازی اولیه پروژه با نکست جی اس
شروع پروژه واقعی با Next.js — ساخت سایت پرتفولیو، بلاگ و داشبورد از صفر
در این سری آموزش قرار است یک پروژه واقعی با Next.js بسازیم؛ نه فقط یک صفحه ساده، بلکه یک سایت کامل که شامل:
- سایت پرتفولیو
- سیستم بلاگ
- داشبورد مدیریت محتوا
- احراز هویت ادمین
- آپلود تصویر
- و بهینهسازی SEO
باشد.
هدف این آموزش فقط یاد گرفتن syntax نیست. میخواهیم مفاهیم را داخل یک پروژه واقعی پیادهسازی کنیم تا در پایان، چیزی داشته باشیم که حتی بتوانیم آن را deploy و استفاده کنیم.
در این پروژه چه چیزی میسازیم؟
ساختار کلی پروژه ما سه بخش اصلی دارد:
1. بخش عمومی سایت
بخشی که کاربران مشاهده میکنند:
- صفحه اصلی
- درباره من
- صفحه تماس
- صفحه پروژهها
- صفحه جزئیات پروژهها
- بلاگ
- صفحه هر مقاله
2. سیستم بلاگ
در این بخش مقالات آموزشی منتشر میکنیم:
- لیست مقالات
- صفحه هر مقاله
- مدیریت مقالات
- SEO برای مقالهها
3. داشبورد ادمین
برای مدیریت سایت:
- ورود ادمین
- ساخت پروژه جدید
- ویرایش پروژهها
- ساخت مقاله
- آپلود تصویر
- مدیریت محتوا
چرا Next.js انتخاب خوبی برای این پروژه است؟
Next.js یکی از محبوبترین فریمورکهای React است و برای پروژههایی مثل پرتفولیو و بلاگ انتخاب بسیار خوبی محسوب میشود.
چند دلیل مهم:
- ساختار حرفهای و مقیاسپذیر
- پشتیبانی عالی از SEO
- سرعت خوب
- پشتیبانی از Server Rendering
- Full-Stack بودن
- سیستم Routing آماده
- عملکرد مناسب برای سایتهای محتوایی
به زبان ساده، Next.js خیلی از چیزهایی که قبلاً باید دستی تنظیم میکردیم را آماده در اختیارمان میگذارد تا بیشتر روی ساخت محصول تمرکز کنیم.
پیشنیازهای این آموزش
قبل از شروع بهتر است با این موارد آشنا باشیم:
- HTML
- CSS
- JavaScript
- React
همچنین روی سیستم خودمون این ابزارها را نصب داشته باشیم:
- Node.js نسخه
20.9یا بالاتر - npm
- VS Code
- آشنایی اولیه با Terminal
ساخت پروژه با Create Next App
سادهترین راه برای شروع پروژههای Next.js استفاده از ابزار رسمی create-next-app است.
در ترمینال دستور زیر را اجرا میکنیم:
npx create-next-app@latest my-app
بعد از اجرا چند سؤال از ما پرسیده میشود.
تنظیمات پیشنهادی برای این پروژه:
✔ Would you like to use TypeScript? → Yes
✔ Would you like to use ESLint? → Yes
✔ Would you like to use Tailwind CSS? → Yes
✔ Would you like your code inside a src/ directory? → No
✔ Would you like to use App Router? → Yes
✔ Would you like to use Turbopack? → Yes
✔ Would you like to customize the import alias? → No
بعد از نصب، وارد پروژه میشویم:
cd my-app
و پروژه را اجرا میکنیم:
npm run dev
اجرای پروژه
بعد از اجرای dev server آدرس زیر را در مرورگر باز میکنیم:
http://localhost:3000
اگر همه چیز درست باشد، صفحه پیشفرض Next.js را میبینیم.
آشنایی با ساختار اولیه پروژه
بعد از ساخت پروژه، چند فایل و پوشه مهم خواهیم دید.
پوشه app
مهمترین بخش پروژه است.
در App Router، مسیر صفحات از روی ساختار پوشهها ساخته میشود.
مثلاً:
app/
page.tsx
blog/
page.tsx
این ساختار دو route میسازد:
/
/blog
یعنی:
app/page.tsx→ صفحه اصلیapp/blog/page.tsx→ صفحه بلاگ
فایل app/page.tsx
این فایل صفحه اصلی سایت است.
هر چیزی داخل این فایل بنویسیم در صفحه / نمایش داده میشود.
مثلاً:
export default function Page() {
return <h1>Hello Next.js</h1>
}
فایل app/layout.tsx
این فایل layout اصلی پروژه است.
تقریباً همه صفحات سایت داخل این layout رندر میشوند.
معمولاً بخشهایی مثل:
- Navbar
- Footer
- فونتها
- Theme
- Metadata
در این فایل قرار میگیرند.
پوشه public
برای فایلهای استاتیک استفاده میشود.
مثل:
- تصاویر
- فونتها
- آیکنها
مثلاً اگر فایل زیر را داشته باشیم:
public/profile.png
میتوانی این تصویر را از این مسیر ببینیم:
/profile.png
فایلهای تنظیمات پروژه
ممکن است این فایلها را هم ببینیم:
next.config.ts
tsconfig.json
eslint.config.mjs
package.json
هرکدام بخشی از تنظیمات پروژه را مدیریت میکنند.
اولین تغییر در پروژه
فایل زیر را باز میکنیم:
app/page.tsx
و محتوای آن را با این کد جایگزین میکنیم:
export default function Page() {
return (
<main>
<h1>My Portfolio</h1>
<p>This site is built with Next.js.</p>
</main>
)
}
فایل را ذخیره میکنیم.
بدون refresh کردن صفحه، تغییرات را در مرورگر میبینیم.
این قابلیت به خاطر Fast Refresh در Next.js است.
چرا این پروژه مهم است؟
وقتی بخواهیم وارد پروژه واقعی شویم، با چالشهای اصلی روبهرو میشویم:
- ساختار پروژه
- مدیریت دادهها
- احراز هویت
- آپلود فایل
- SEO
- معماری مناسب
در این سری آموزش سعی میکنیم این مفاهیم را داخل یک پروژه واقعی یاد بگیریم.
در ادامه چه چیزهایی یاد میگیریم؟
در قسمتهای بعدی سراغ این موضوعات میرویم:
- طراحی ساختار حرفهای پروژه
- ساخت layout اصلی سایت
- طراحی صفحه Home
- ساخت سیستم پروژهها
- ساخت بلاگ
- اتصال دیتابیس
- Prisma و PostgreSQL
- احراز هویت ادمین
- ساخت داشبورد
- آپلود تصویر
- SEO و بهینهسازی
- Deploy پروژه
جمعبندی
در این قسمت:
- با هدف پروژه آشنا شدیم
- پروژه Next.js را ساختیم
- ساختار اولیه را بررسی کردیم
- اولین صفحه را تغییر دادیم
- و آماده شدیم تا پروژه واقعی را شروع کنیم
در قسمت بعدی سراغ طراحی ساختار پروژه و معماری پوشهها میرویم تا از همان ابتدا پروژه تمیز و قابل توسعهای داشته باشیم.