درک Next.js: – انجمن DEV

Next.js چیست؟

Next.js یک فریمورک قدرتمند است که به توسعه دهندگان کمک می کند تا برنامه های کاربردی وب را کارآمدتر بسازند. این بر روی React ساخته شده است، یک کتابخانه محبوب برای ایجاد رابط کاربری. حتی اگر React را نمی‌دانید، همچنان می‌توانید Next.js را با در نظر گرفتن مجموعه‌ای از ابزارهایی که توسعه وب را آسان‌تر و سریع‌تر می‌کند، درک کنید.

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

1. رندر سمت سرور (SSR):
   • توضیح: رندر فرآیند تبدیل داده ها به چیزی است که می توانید در یک صفحه وب ببینید. رندر سمت سرور به این معنی است که این فرآیند قبل از ارسال صفحه به مرورگر شما در سرور اتفاق می افتد.
   • مزایا: باعث می شود وب سایت ها سریعتر بارگذاری شوند و نحوه نمایش آنها در نتایج موتورهای جستجو را بهبود می بخشد.
2. مسیریابی آسان:
   • توضیح: مسیریابی تعیین می کند که چگونه URL های مختلف با بخش های مختلف برنامه شما مطابقت دارند. Next.js با استفاده از سیستم فایل شما این کار را ساده می کند.
   • مثال: اگر پوشه ای با نام “about” و فایلی به نام “page.js” در داخل آن ایجاد کنید، آن صفحه در “https://dev.to/about” قابل دسترسی خواهد بود.
3. یکپارچه سازی API:
   • توضیح: Next.js به شما این امکان را می‌دهد که نقاط پایانی API را مستقیماً در پروژه خود ایجاد کنید، و نیازی به تنظیم پشتیبان جداگانه را از بین می‌برد.
   • فایده: فرآیند توسعه را با مدیریت واکشی داده ها و منطق سرور در یک پروژه ساده می کند.

راه اندازی یک پروژه Next.js:

• فرمان: استفاده کنید npx create-next-app@latest برای ایجاد یک پروژه Next.js جدید.
• هدف: این دستور یک پروژه جدید را با تمام فایل‌ها و تنظیمات لازم راه‌اندازی می‌کند و یک ساختار آماده را برای ساختن فراهم می‌کند.

مسیریابی در Next.js:

• مسیرهای اصلی:
  • مثال: یک پوشه به نام “about” در دایرکتوری “app” ایجاد کنید و یک فایل “page.js” اضافه کنید. این صفحه در “https://dev.to/about” قابل دسترسی خواهد بود.

• مسیرهای تو در تو:

  • مثال: یک ساختار پوشه مانند “app/about/projects” با فایل “page.js” ایجاد کنید. این در “/about/projects” قابل دسترسی خواهد بود.

• مسیرهای پویا:

  • مثال: یک فایل به نام ” ایجاد کنید[id]js در داخل یک پوشه، مانند «app/posts/[id]js. این نشانی‌های اینترنتی مانند «/posts/1» را مدیریت می‌کند، که در آن «1» یک پارامتر پویا است.

طرح‌بندی‌ها و قالب‌ها در Next.js:

• چیدمان های مشترک:
  • توضیح: طرح‌بندی‌های مشترک مانند قالب‌هایی هستند که برای چندین صفحه اعمال می‌شوند. طرح‌بندی ریشه به‌طور خودکار برای همه صفحات اعمال می‌شود و معمولاً حاوی عناصر مشترکی مانند نوارهای پیمایش و پاورقی است.
  • چیدمان های سفارشی: می توانید با افزودن فایل های طرح بندی در پوشه های خاص، طرح بندی های سفارشی را برای بخش های خاصی از سایت خود ایجاد کنید.

• فراداده پویا:

  • توضیح: ابرداده پویا به شما امکان می دهد عناوین صفحه، توضیحات و سایر اطلاعات را بر اساس محتوای صفحه تنظیم کنید.
  • فایده: برای سئو و تجربه کاربر مهم است.

تکنیک های رندر در Next.js:

• اجزای سرور:
  • توضیح: این کامپوننت ها روی سرور رندر می شوند و برای محتوایی که تغییر چندانی نمی کنند ایده آل هستند.
  • فایده: مقدار جاوا اسکریپت ارسال شده به مشتری را کاهش می دهد و باعث می شود صفحه سریعتر بارگذاری شود.

• اجزای مشتری:

  • توضیح: این مؤلفه‌ها در سمت کلاینت ارائه می‌شوند و برای بخش‌هایی از برنامه که نیاز به تعامل دارند، مانند فرم‌ها یا دکمه‌ها، استفاده می‌شوند.
  • فایده: می توانید از قلاب های React مانند استفاده کنید useState و useEffect برای رفتار پویا

مسیریابی API با Next.js

Next.js فرآیند ایجاد نقاط پایانی API را ساده می‌کند و به توسعه‌دهندگان اجازه می‌دهد تا APIهای RESTful را در همان پروژه بسازند.

ایجاد مسیرهای API

• پوشه API: ایجاد کنید api پوشه در داخل app پوشه های فرعی برای هر نقطه پایانی API ایجاد کنید. به عنوان مثال، app/api/users با URL مطابقت خواهد داشت /api/users.
• گردانندگان مسیر: مسیرهای API با استفاده از تعریف می شوند route.js فایل‌هایی که درخواست‌های HTTP را مدیریت می‌کنند و پاسخ‌ها را برمی‌گردانند.

عملیات CRUD

• دریافت، پست، قرار دادن، حذف: Next.js از تمام روش‌های استاندارد HTTP پشتیبانی می‌کند و ایجاد عملیات CRUD (ایجاد، خواندن، به‌روزرسانی، حذف) را آسان می‌کند.
• واکشی داده ها: توسعه‌دهندگان می‌توانند داده‌ها را از APIهای خارجی یا پایگاه‌های داده در مسیرهای API خود با استفاده از توابعی مانند واکشی کنند fetch یا axios.

نمونه های کدنویسی

1. مسیریابی در Next.js

مسیر ثابت:
یک فایل ایجاد کنید pages/about.js:

export default function About() {
  return <h1>About Pageh1>;
}

قابل دسترسی در http://localhost:3000/about.

مسیر پویا:
یک فایل ایجاد کنید pages/posts/[id].js:

import { useRouter } from 'next/router';

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

  return <h1>Post {id}h1>;
}

قابل دسترسی در http://localhost:3000/posts/1.

2. مسیرهای API

دریافت نقطه پایانی:
یک فایل ایجاد کنید pages/api/getPosts.js:

export default function handler(req, res) {
  const posts = [{ id: 1, title: 'Hello World' }];
  res.json(posts);
}

قابل دسترسی در http://localhost:3000/api/getPosts.

نقطه پایانی POST:
یک فایل ایجاد کنید pages/api/createPost.js:

export default function handler(req, res) {
  if (req.method === 'POST') {
    const post = req.body;
    // Save post to database
    res.status(201).json(post);
  } else {
    res.status(405).end();
  }
}

قابل دسترسی در http://localhost:3000/api/createPost.

3. سرور در مقابل اجزای مشتری

جزء سرور:

// pages/serverComponent.js
export default function ServerComponent() {
  return <h1>This is a server componenth1>;
}

جزء مشتری:

// pages/clientComponent.js
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
}

ساختار پوشه برای مسیرها

• دایرکتوری ریشه:
  • pages/
    • index.js -> http://localhost:3000/
    • about.js -> http://localhost:3000/about
    • posts/
      • [id].js -> http://localhost:3000/posts/1
    • api/
      • getPosts.js -> http://localhost:3000/api/getPosts

جداول مقایسه

استاتیک در مقابل سرور در مقابل ارائه مشتری

React در مقابل Next.js: مقایسه جامع

واکنش نشان دهید

• تمرکز اصلی: React یک کتابخانه جاوا اسکریپت برای ساخت رابط های کاربری، به ویژه برنامه های تک صفحه ای است.
• مسیریابی: برای پیمایش به کتابخانه های خارجی مانند React Router نیاز دارد.
• رندر سمت سرور: تعبیه نشده است. نیاز به تنظیم اضافی دارد
• مسیرهای API: بدون پشتیبانی داخلی. به طور معمول نیاز به یک تنظیم پشتیبان جداگانه دارد.
• بهینه سازی: برای بهینه سازی عملکرد به ابزارهای اضافی مانند Webpack نیاز دارد.
• منحنی یادگیری: شروع آسان تر است، اما مدیریت برنامه های پیچیده می تواند چالش برانگیز باشد.
• اکوسیستم: یک اکوسیستم وسیع با بسیاری از کتابخانه ها و ابزارهای شخص ثالث.

Next.js

• تمرکز اصلی: Next.js یک فریم ورک تمام پشته است که بر روی React ساخته شده است و ویژگی های پیشرفته ای را ارائه می دهد.
• مسیریابی: سیستم مسیریابی مبتنی بر فایل داخلی که نیاز به کتابخانه های خارجی را از بین می برد.
• رندر سمت سرور: پشتیبانی داخلی SSR برای عملکرد بهتر و SEO.
• مسیرهای API: از مسیریابی API به طور مستقیم در داخل پروژه پشتیبانی می کند.
• بهینه سازی: شامل بهینه سازی های داخلی مانند تقسیم کد و بهینه سازی خودکار برای سایت های استاتیک است.
• منحنی یادگیری: به دلیل قراردادها و ویژگی های اضافی کمی شیب دارتر است.
• اکوسیستم: یک رویکرد ساختاریافته با قراردادها و بهترین شیوه ها ارائه می کند.

ملاحظات کلیدی

• پیچیدگی پروژه: برای سایت های استاتیک ساده، React ساده با کتابخانه های اضافی ممکن است کافی باشد. برای برنامه های پیچیده که نیاز به مدیریت SSR و API دارند، Next.js سودمند است.
• عملکرد: Next.js با بهینه سازی های داخلی خود عملکرد بهتری را ارائه می دهد.
• انعطاف پذیری در مقابل قرارداد: React انعطاف‌پذیری بیشتری را ارائه می‌کند، در حالی که Next.js یک چارچوب ساختاریافته و دارای نظرات ارائه می‌دهد.
• انجمن و پشتیبانی: هر دو دارای جوامع قوی هستند، اما Next.js از اکوسیستم React استفاده می کند و در عین حال ابزارهای خود را اضافه می کند.

نتیجه گیری

• واکنش نشان دهید: ایده آل برای ساخت اجزای رابط کاربری قابل استفاده مجدد و مدیریت وضعیت با انعطاف پذیری.
• Next.js: برای ساخت برنامه های کاربردی وب با امکانات کامل با رندر سمت سرور، مدیریت API و بهینه سازی های داخلی برتر است.

توضیح “استفاده از مشتری”

در Next.js، دستورالعمل "use client" برای نشان دادن اینکه یک جزء باید به عنوان یک جزء مشتری در نظر گرفته شود استفاده می شود. این بدان معنی است که کامپوننت و فرزندان آن فقط می توانند از ویژگی هایی مانند سمت مشتری استفاده کنند useState و useEffect.

زمان استفاده:

• زمانی که نیاز به مدیریت حالت یا عوارض جانبی در یک جزء دارید.
• برای اجزای تعاملی که به منطق سمت مشتری نیاز دارند.

مثال:

// pages/clientComponent.js
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}p>
      <button onClick={() => setCount(count + 1)}>Incrementbutton>
    div>
  );
}

مقدمه ای بر NextResponse

NextResponse ابزاری است که توسط Next.js برای ساده سازی ایجاد و مدیریت پاسخ های API ارائه شده است. این طراحی شده است تا به طور یکپارچه با مسیرهای API در Next.js کار کند و روش‌های آسانی برای رسیدگی به انواع مختلف پاسخ‌ها ارائه می‌دهد.

• پاسخ های JSON: NextResponse.json(data, options) یک پاسخ JSON با داده ها و گزینه های مشخص شده ارسال می کند.
• تغییر مسیرها: NextResponse.redirect(url, status) درخواست را به یک URL دیگر هدایت می کند.
• پاسخ های سفارشی: همچنین می توانید پاسخ های سفارشی را با کدهای وضعیت و هدرهای خاص ایجاد کنید.

مسیریابی پویا با […blogs]

مسیر app/api/[...blogs]/route.js یک است مسیر همه جانبه در Next.js، به شما امکان می دهد الگوهای URL مختلف را در زیر مدیریت کنید /api/blogs.

• Catch-All Segments: [...blogs] سینتکس تمام بخش‌های مسیر URL را می‌گیرد و آن را برای مدیریت ساختارهای URL مختلف انعطاف‌پذیر می‌کند.
• مدیریت الگوهای مختلف URL:
  • /api/blogs برای واکشی همه وبلاگ ها
  • /api/blogs/1 برای واکشی یک وبلاگ با شناسه.
  • /api/blogs/1/comments برای واکشی نظرات برای یک وبلاگ خاص.

اجرای نمونه

// app/api/[...blogs]/route.js
import { getBlogs, getBlogById, getCommentsForBlog } from '../../../lib/blogs';

export async function GET(request, { params }) {
  const { blogs } = params;

  if (blogs.length === 0) {
    // Handle /api/blogs
    const allBlogs = await getBlogs();
    return NextResponse.json(allBlogs);
  } else if (blogs.length === 1) {
    // Handle /api/blogs/1
    const blogId = blogs[0];
    const blog = await getBlogById(blogId);
    if (!blog) {
      return NextResponse.json({ error: 'Blog not found' }, { status: 404 });
    }
    return NextResponse.json(blog);
  } else if (blogs.length === 2 && blogs[1] === 'comments') {
    // Handle /api/blogs/1/comments
    const blogId = blogs[0];
    const comments = await getCommentsForBlog(blogId);
    return NextResponse.json(comments);
  } else {
    return NextResponse.json({ error: 'Invalid URL' }, { status: 400 });
  }
}

ملاحظات کلیدی

1. کنترل پارامترها: از params شی برای دسترسی به بخش های پویا URL.
2. رسیدگی به خطا: پاسخ های خطای مناسب را با کدهای وضعیت برگردانید.
3. امنیت: در صورت نیاز، بررسی های احراز هویت و مجوز را اجرا کنید.
4. عملکرد: واکشی داده ها را بهینه کنید و استراتژی های کش را در نظر بگیرید.
5. تست کردن: از تست های واحد یا ابزارهایی مانند Postman برای تأیید نقاط پایانی API استفاده کنید.

یکپارچه سازی پایگاه های داده

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

یکپارچه سازی پایگاه داده

• Supabase، MongoDB، PostgreSQL: Next.js را می توان با پایگاه های داده معروفی مانند Supabase، MongoDB و PostgreSQL ادغام کرد و به توسعه دهندگان در انتخاب راه حل پایگاه داده خود انعطاف پذیری ارائه می دهد.
• احراز هویت: Next.js فرآیندهای احراز هویت را با کتابخانه های یکپارچه ای مانند next-auth، اجرای احراز هویت ایمن کاربر را آسان تر می کند.

مثال: ادغام Supabase

• راه اندازی Supabase: کتابخانه مشتری Supabase را نصب کنید و یک نمونه Supabase را در پروژه خود راه اندازی کنید.
• واکشی داده ها: از مشتری Supabase برای واکشی داده ها در مسیرهای API یا اجزای مشتری استفاده کنید.
• ذخیره سازی داده ها: از Supabase برای ذخیره داده‌ها مانند نمایه‌های کاربر یا وضعیت برنامه استفاده کنید و از ماندگاری داده‌ها در طول جلسات اطمینان حاصل کنید.

نتیجه گیری

Next.js یک چارچوب قدرتمند است که توسعه برنامه های کاربردی وب را ساده می کند و مجموعه ای جامع از ویژگی ها را ارائه می دهد که عملکرد، مقیاس پذیری و بهره وری توسعه دهندگان را افزایش می دهد. Next.js با ترکیب بهترین های React با رندر سمت سرور، مسیریابی API و یکپارچه سازی پایگاه داده، توسعه دهندگان را قادر می سازد تا برنامه های پویا، کارآمد و مقیاس پذیر بسازند.

با درک بیشتر مفاهیم، ​​موارد بیشتری اضافه خواهد شد.

متشکرم