شروع کار با Next.js: راهنمای مبتدیان

Summarize this content to 400 words in Persian Lang
به دنیای Next.js خوش آمدید! اگر در زمینه توسعه وب تازه کار هستید یا به تازگی با فریمورک های جاوا اسکریپت شروع کرده اید، Next.js یک گزینه قدرتمند و آسان برای ساخت برنامه های وب پویا است. در این پست وبلاگ، Next.js را به شما معرفی می‌کنم، ویژگی‌های کلیدی آن را توضیح می‌دهم و شما را از طریق مراحل شروع اولین پروژه خود راهنمایی می‌کنم.

Next.js چیست و چرا آن را یاد بگیریم؟Next.js یک چارچوب محبوب React است که توسط Vercel توسعه یافته است. برای ساخت برنامه‌های React رندر شده توسط سرور به راحتی استفاده می‌شود. برخلاف برنامه‌های سنتی React که در سمت کلاینت رندر می‌شوند، Next.js امکان رندر سمت کلاینت و سمت سرور را فراهم می‌کند. شاید بپرسید این چه فایده ای دارد؟ این منجر به بارگذاری سریع‌تر صفحه و سئوی بهتر می‌شود و آن را به انتخابی عالی برای ساخت برنامه‌های وب با کارایی بالا تبدیل می‌کند.

ویژگی ها و مفاهیم کلیدی Next.js

رندر سمت سرور (SSR): Next.js به شما امکان می دهد صفحات را روی سرور رندر کنید که می تواند عملکرد و سئو را به میزان قابل توجهی بهبود بخشد.

تولید سایت استاتیک (SSG): شما می توانید HTML ایستا را در زمان ساخت ایجاد کنید، که برای وب سایت های استاتیک ایده آل است.

مسیرهای API: به راحتی نقاط پایانی API را به عنوان بخشی از برنامه Next.js خود بدون نیاز به سرور خارجی ایجاد کنید.

مسیریابی مبتنی بر فایل: صفحات در Next.js توسط فایل‌های دایرکتوری صفحات تعریف می‌شوند و مسیریابی را بصری و ساده می‌کنند.

تقسیم خودکار کد: Next.js به‌طور خودکار کد شما را برای بارگذاری سریع‌تر صفحه و عملکرد بهتر تقسیم می‌کند.پشتیبانی CSS و Sass: می توانید فایل های CSS و Sass را مستقیماً به اجزای خود وارد کنید.

شروع به کار با Next.js

قبل از شیرجه زدن به Next.js، شما باید درک اولیه ای از جاوا اسکریپت و React داشته باشید. اگر با این فناوری‌ها آشنایی ندارید، توصیه می‌کنم ابتدا کمی وقت بگذارید و آنها را یاد بگیرید.

پیش نیازها:Node.js (>= 12.22.0)npm/کاموا/نان (برای اهداف این وبلاگ به npm می پردازم)نصب و راه اندازی

Node.js را نصب کنید: Node.js را از nodejs.org دانلود و نصب کنید. با این کار npm، مدیر بسته Node نیز نصب می شود.

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

npx create-next-app@latest project-name

به فهرست پروژه خود بروید:

Cd project-name

سرور توسعه را اجرا کنید

برای راه اندازی سرور توسعه، اجرا کنید:Npm run dev

مرورگر خود را باز کرده و به آن بروید http://localhost:3000. باید برنامه Next.js خود را در حال اجرا ببینید!

مسیریابی برنامه در Next.js

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

ایجاد مسیرهادر فهرست برنامه، هر فایل مربوط به یک مسیر در برنامه شما است. به عنوان مثال، برای ایجاد یک مسیر برای صفحه اصلی، یک را ایجاد کنید app/page.js فایل:

// app/page.js

export default function HomePage() {
return (

Welcome to the home page!

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

برای ایجاد یک مسیر برای درباره صفحه، یک **app/about/page.js **فایل ایجاد کنید:

// app/about/page.js

export default function AboutPage() {
return (

Welcome to the about page!

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، در حال حرکت به http://localhost:3000 صفحه اصلی را نشان می دهد و http://localhost:3000/about صفحه درباره را نشان خواهد داد.

مسیرهای پویا

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

یک مسیر پویا برای پست های وبلاگ ایجاد کنید:

// app/blog/[id]/page.js

import { useRouter } from ‘next/router’;

export default function BlogPost() {
const router = useRouter();
const { id } = router.query;

return (

This is the content of blog post {id}.

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

اکنون، در حال حرکت به http://localhost:3000/blog/1 محتوای پست وبلاگ 1 و http://localhost:3000/blog/2 محتوای پست وبلاگ 2 را نشان خواهد داد.

پیوند بین صفحات

Next.js یک مؤلفه Link داخلی را برای مدیریت ناوبری سمت مشتری بین مسیرها فراهم می کند. وارد کنید ارتباط دادن جزء از next/link و از آن برای ایجاد پیوند بین صفحات استفاده کنید:

// app/page.js

import Link from ‘next/link’;

export default function HomePage() {
return (

);
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نکاتی برای یادگیری Next.js

با اسناد رسمی شروع کنید: مستندات Next.js جامع و قابل پیگیری است.

ساخت پروژه های کوچک: با ساختن پروژه های کوچک مانند وبلاگ، سایت نمونه کارها یا یک فروشگاه تجارت الکترونیک ساده تمرین کنید.

به انجمن بپیوندید: در پلتفرم هایی مانند GitHub، Reddit، و Stack Overflow با انجمن Next.js درگیر شوید. شما می توانید از تجربیات دیگر توسعه دهندگان چیزهای زیادی یاد بگیرید.

کاوش نمونه ها: Next.js مخزنی از مثال‌ها را برای کمک به درک موارد استفاده مختلف و بهترین شیوه‌ها ارائه می‌کند.

نتیجهNext.js یک چارچوب همه کاره و قدرتمند است که ساخت برنامه های React را آسان تر و کارآمدتر می کند. با قابلیت های رندر سمت سرور، تولید سایت ایستا، و مسیریابی بصری، یک انتخاب عالی برای توسعه دهندگان در تمام سطوح مهارت است. با دنبال کردن این راهنما، باید پایه محکمی برای شروع ساختن پروژه های Next.js خود داشته باشید. کد نویسی مبارک!

// app/page.js

export default function HomePage() {
  return (
    

      
      
Welcome to the home page!
    
  );
}

// app/about/page.js

export default function AboutPage() {
  return (
    

      
      
Welcome to the about page!
    
  );
}

// app/blog/[id]/page.js

import { useRouter } from 'next/router';

export default function BlogPost() {
  const router = useRouter();
  const { id } = router.query;

  return (
    

      
      
This is the content of blog post {id}.
    
  );
}

// app/page.js

import Link from 'next/link';

export default function HomePage() {
  return (
    
  );
}