بهینه سازی صفحات استاتیک در برنامه های Next.js با Prisma

هنگام ساخت برنامه های وب، عملکرد و بهینه سازی ویژگی های کلیدی هستند که باید در نظر داشته باشید. اولین برداشتی که به کاربران خود ارائه می دهید می تواند تفاوت قابل توجهی ایجاد کند. اگر کاربر از وب سایت شما بازدید کند و با صفحه ای با سرعت بارگذاری کند مواجه شود، تصور بدی برای او ایجاد می کند زیرا نمی تواند با محتوای وب سایت شما درگیر شود.

بارگذاری سریع و بهینه صفحه وب سایت با تعاملات یکپارچه، تجربه کاربری مثبت و کاهش کم کاربران را ایجاد می کند. همچنین رتبه بندی بهینه سازی موتورهای جستجو (SEO) را بهبود می بخشد. در این مقاله به بررسی بهینه سازی صفحات استاتیک در Next.js با استفاده از Prisma می پردازیم. Next.js یک فریمورک قوی برای تولید سایت ایستا فراهم می کند، در حالی که Prisma یک ابزار پایگاه داده مدرن است که عملیات پایگاه داده و سازگاری داده ها را ساده می کند. آنها با هم سرعت و کارایی صفحات استاتیک را در برنامه های Next.js افزایش می دهند.

Next.js چیست؟

Next.js فرآیند توسعه برنامه های وب فرانت اند را ساده می کند و همچنین برنامه های وب شما را از طریق ویژگی هایی مانند رندر سمت سرور بهینه می کند. رندر سمت سرور شامل پیش نمایش یک صفحه وب روی سرور قبل از ارسال آن به کلاینت برای استفاده برای فعال کردن نمایش فوری و بهبود سئو است. Next.js همچنین رندر سمت کلاینت را بر اساس مورد استفاده شما ارائه می دهد.

یکی دیگر از ویژگی های عالی Next.js سیستم مسیریابی مبتنی بر فایل آن است، یعنی وقتی پروژه Next را راه اندازی می کنید و پوشه ای به نام contacts ایجاد می کنید، سپس یک فایل index.js در داخل این پوشه ایجاد می کنید، نام پوشه بلافاصله تبدیل به روت می شود.

این بدان معنی است که شما می توانید به URL localhost:3000/contact بروید و صفحه تماس شما بارگیری می شود، برخلاف React که در آن باید تنظیمات پیچیده ای را برای مسیریابی تنظیم کنید.

در نهایت، Next.js با فراهم کردن توانایی توسعه دهندگان برای نوشتن توابع بدون سرور به طور مستقیم در پروژه Next.js، تلاقی بین frontend و backend را محو می کند. از زمان انتشار Next.js نسخه 9، توسعه دهندگان قادر به ایجاد برنامه های فول استک با استفاده از Next.js و توابع بدون سرور از طریق مسیرهای API آن بوده اند.

تولید سایت ایستا (SSG) با Next.js

تولید سایت ایستا به فرآیندی اشاره دارد که در آن فایل HTML شما در زمان ساخت تولید می شود و در هر درخواستی که انجام می شود مجددا استفاده می شود.

به عنوان مثال، بگویید که ما در حال ساخت یک برنامه تک صفحه ای و آماده برای تولید با استفاده از next-build هستیم. یک فایل HTML برای آن صفحه در زمان ساخت تولید می شود. هنگامی که یک کلاینت به وب‌سایت مستقر شده دسترسی پیدا می‌کند، این فایل HTML از پیش تولید شده برای هر درخواست ارائه می‌شود و آن را توسط یک شبکه تحویل محتوا قابل ذخیره‌سازی می‌کند. در Next.js، می توانید به صورت ایستا یک صفحه با داده یا بدون داده ایجاد کنید.

تولید استاتیک بدون داده

برای تولید استاتیک بدون داده، صفحات بدون واکشی هیچ داده خارجی در زمان ساخت تولید می شوند.

فرض کنید ما یک کامپوننت ساده React داریم و شما دستور next-build را اجرا می کنید. فایل HTML با استفاده از تولید ایستا بدون داده از قبل رندر می شود، زمانی که نیازی به واکشی داده های خارجی وجود ندارد. این رویکرد به ویژه برای صفحات فهرست یا بازاریابی که دارای نشانه گذاری ثابت بدون نیاز به داده های خارجی هستند، مفید است.

بیایید نگاهی به کد زیر بیندازیم:

const Services = () => {
return (
   <div>
     <h1>Here is an overview of our services</h1>
   </div>
  )
 }

export default Services;

در اینجا، ما فقط یک کامپوننت ساده React (سرویس ها) را از قبل ارائه می کنیم - هیچ داده خارجی واکشی نمی شود. به‌طور پیش‌فرض، Next.js این صفحه را با استفاده از تولید استاتیک بدون داده، از قبل ارائه می‌کند. در طول زمان ساخت آن را به عنوان یک فایل HTML در هر صفحه تولید می کند.

تولید استاتیک با داده ها

در تولید استاتیک با داده، صفحات تنها پس از واکشی داده های خارجی در زمان next-build می شوند. این یعنی چی؟ فرض کنید یک صفحه کاربران در برنامه Next.js خود دارید. هنگامی که یک کلاینت از این صفحه درخواست می کند، می خواهید برخی از داده های کاربر را در صفحه واکشی و نمایش دهید. می توانید از تولید استاتیک با داده ها برای واکشی داده های خارجی استفاده کنید، پس از آن HTML می تواند تولید شود.

بیایید به مثال زیر نگاهی بیندازیم:

import React from "react";
const Users = ({ users }) => {
return (
<div>
<h1>Here is a List of our Users</h1>
{users.map((user) => (
<div key={user.id}>
<h2>{user.name}</h2>
</div>
))}
</div>
);
};

export default Users;


export const getStaticProps = async () => {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await response.json();
console.log("users", users);

return {
props: { users },
};
};

در اینجا، داده ها با استفاده از تابعی به نام getStaticProps واکشی می شوند. این تابع در طول زمان ساخت برای واکشی داده‌های مورد نیاز فراخوانی می‌شود و به ما امکان می‌دهد تا داده‌های واکشی شده را در پیش‌رندر به قسمت‌های صفحه (در این مورد، کاربران) منتقل کنیم. در بخش بعدی بیشتر در مورد getStaticProps صحبت خواهیم کرد.

همانطور که قبلا ذکر شد، SSG صفحات وب را در طول زمان ساخت از قبل ارائه می کند، در نتیجه فایل های HTML ایستا تولید می کند که مستقیماً از یک شبکه تحویل محتوا به کلاینت ارائه می شود.

SSG با اجازه دادن به موتورهای جستجو برای خزیدن و نمایه سازی مؤثر وب سایت شما، سئو را بهبود می بخشد، زیرا محتوا به راحتی در HTML در دسترس است، که منجر به دیده شدن و رتبه بندی بهتر در موتورهای جستجو می شود.

راه اندازی Prisma با Next.js

Prisma یک Node.js و TypeScript ORM نسل بعدی است که به ساده کردن دسترسی و مدیریت پایگاه داده کمک می کند. این یک رویکرد type-safe، اسکیما برای تعامل با پایگاه داده ارائه می دهد.

اولین قدم در راه اندازی Prisma با Next.js این است که Next.js را با استفاده از دستوری که قبلا ذکر شد ایجاد کنید: npx create-next-app your-app-name.

اگر قبلاً Prisma را نصب نکرده اید، این کار را با دستور npm install -g prisma انجام دهید. سپس، با استفاده از npm i prisma -D، Prisma را به عنوان وابستگی توسعه دهنده در برنامه Next.js خود نصب کنید. در نهایت Prisma Client را با دستور npm i @prisma/client نصب کنید. این یک نمونه از Prisma برای استفاده در برنامه ما ایجاد می کند.

هنگامی که این وابستگی ها نصب شدند، دستور prisma init را اجرا کنید، که یک پوشه Prisma را ایجاد می کند که شامل schema و یک فایل env است.

برای این پروژه، ما از MySQL به عنوان پایگاه داده خود استفاده خواهیم کرد. به راحتی می توانید از هر پایگاه داده دیگری برای اتصال پایگاه داده استفاده کنید. از میز کار MySQL، روی Create a new connection کلیک کنید، یک نام اتصال اضافه کنید و برای راه اندازی یک اتصال جدید، روی OK کلیک کنید:

در فایل env.، مقدار پیش فرض DATABASE_URL را با رشته اتصالات MySQL در این قالب جایگزین کنید: mysql://user:password@host:port/dbName. در این حالت به صورت زیر خواهد بود:

DATABASE_URL="mysql://root:password@127.0.0.1:3306/NextJSPrisma"

سپس، فایل schema.prisma را باز کنید و یک کاربر فراخوانی مدل ایجاد کنید:

model User {
id Int @id @default(autoincrement())
email String @unique
name String?
password String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt

@@map(name: "users")
}

سپس، دستور npx prisma db را اجرا کنید تا تغییرات در پایگاه داده MySQL اعمال شود.

ما با موفقیت پایگاه داده MySQL خود را با طرح Prisma متصل کردیم. اکنون می توانیم با استفاده از Prisma با پایگاه داده خود در برنامه Next.js تعامل داشته باشیم.

در پوشه pages یک مسیر جدید با نام فایل users.js ایجاد کنید. سپس در فایل src/pages/users/index.js کد زیر را اجرا کنید:

import React from "react";

const Users = () => {
return (
<div>
<h1>This is the Users Page</h1>
</div>
);
};

export default Users;

این یک مسیر کاربری جدید ایجاد می کند. اکنون، وقتی به localhost:3000/users می روید، این کامپوننت ساده را در مسیر رندر خواهید دید.

اکنون، ما باید یک نقطه پایانی API بدون سرور برای ایجاد کاربران جدید و ارسال درخواست POST در تابع onSubmit ایجاد کنیم. تابع onSubmit به عنصر فرم متصل است، بنابراین وقتی کاربر روی آن کلیک می کند، یک درخواست POST به آن نقطه پایانی API ارسال می کند تا یک کاربر جدید از سمت کلاینت ایجاد کند.

در فایل src/pages/users/index.js کد زیر را اجرا کنید:

const Users = () => {
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
});

const onChange = (e) => {
setFormData({ ...formData, [e.target.name]: e.target.value });
};

const onSubmit = async (e) => {
e.preventDefault();

try {
await fetch("/api/create-users", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(formData),
});

setFormData({
name: "",
email: "",
password: "",
});
} catch (error) {
console.log(error);
}
};
return (
<div>
<h1>Here is a List of our Users</h1>
<form action="" onSubmit={onSubmit}>
<input
type="text"
name="name"
value={formData.name}
placeholder="name"
onChange={onChange}
/>
<input
type="email"
name="email"
value={formData.email}
placeholder="email"
onChange={onChange}
/>
<input
type="password"
name="password"
placeholder="password"
value={formData.password}
onChange={onChange}
/>

<button type="submit">Submit</button>
</form>
</div>
);
};

export default Users;

کد بالا دارای یک کامپوننت صفحه ساده با سه ورودی (نام، ایمیل و رمز عبور) است و مقدار آن بر اساس state مدیریت می شود. تابع onSubmit جایی است که ما یک درخواست POST را به نقاط پایانی API بدون سرور Cre-User ارسال می کنیم که بعداً ایجاد خواهیم کرد.

اساساً آنچه در این کامپوننت اتفاق می‌افتد این است که کاربر جزئیات کاربر مورد نظر را وارد می‌کند و با کلیک روی دکمه Submit، تابع onSubmit فعال می‌شود و یک درخواست POST با جزئیات به نقطه پایانی بدون سرور ایجاد کاربر ارسال می‌شود. کاربر، یعنی نام، ایمیل و رمز عبور خود را وارد کرده است.

در داخل پوشه API در مسیر pages، یک فایل جدید به نام create-users.js ایجاد کنید و کد زیر را وارد کنید:

const { PrismaClient } = require("@prisma/client");

const prisma = new PrismaClient();

export default async function handler(req, res) {
const { name, email, password } = req.body;
const user = await prisma.user.create({
data: {
name,
email,
password,
},
});
res.json(user);
}

در اینجا، Prisma Client API برای نمونه سازی یک نمونه جدید از Prisma برای استفاده ما استفاده می شود. سپس، ما تابع handler را ایجاد می‌کنیم، جایی که بدنه درخواستی که از frontend ارسال می‌شود (users/index.js) در حال تخریب است.

همانطور که در بالا مشاهده شد، نام، ایمیل و رمز عبور در حال تخریب هستند. سپس از Prisma API برای ایجاد یک کاربر جدید با استفاده از داده های بدن درخواست ارسال شده از سمت کلاینت استفاده می شود. ما از prisma.user استفاده می کنیم زیرا این نام جدول ما از طرح اولیه ایجاد شده است، سپس از متد create برای ایجاد یک کاربر جدید استفاده می شود.

بیایید سعی کنیم یک کاربر جدید ایجاد کنیم و ببینیم چگونه کار می کند. اطلاعات مورد نیاز را وارد کرده و دکمه ارسال را بزنید.

هنگامی که درخواست با موفقیت انجام شد، پایگاه داده MySQL را بررسی کنید تا ببینید آیا کاربر ایجاد شده است یا خیر.

اکنون، ما می‌توانیم کاربری را که فقط سعی کردیم در پایگاه داده خود ایجاد کنیم، ببینیم و با موفقیت با پایگاه داده MySQL خود از فرانت‌اند بدون ایجاد هیچ بک اندی تعامل برقرار کرده‌ایم.

برای تکمیل این بخش، نقطه پایانی API بدون سرور دیگری ایجاد می کنیم تا همه کاربران را دریافت کنیم و یک درخواست GET به این نقطه پایانی ارسال کنیم. در فایل src/pages/api/get-users موارد زیر را اجرا کنید:

const { PrismaClient } = require("@prisma/client");

const prisma = new PrismaClient();

export default async function handler(req, res) {
const users = await prisma.user.findMany();
res.json(users);
}

یک تابع کنترل کننده جدید برای دریافت تمام کاربرانی که در پایگاه داده ایجاد و ذخیره شده اند ایجاد می شود. روش prisma.users برای دسترسی به داده های کاربران ذخیره شده در پایگاه داده استفاده می شود، در حالی که متد ()findMany برای کوئری از پایگاه داده و بازیابی چندین رکورد استفاده می شود.

در سمت فرانت ، SWR (یک کتابخانه واکشی داده) برای واکشی و ذخیره داده ها استفاده خواهد شد. می توانید آن را با استفاده از npm i swr نصب کنید.

در src/pages/users/index.js کد زیر را اجرا کنید:

import useSWR from "swr";

const Users = () => {
const fetcher = (url) => fetch(url).then((res) => res.json());
const { data, error } = useSWR("/api/get-users", fetcher, {
refreshInterval: 1000,
});

}

return (
<div>
<h1>Here is a List of our Users:</h1>
{data &&
data.map((user) => (
<div key={user.id}>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
))}

یک تابع fetcher تعریف شده است که یک URL را به عنوان آرگومان برای واکشی داده ها از آن URL می گیرد. UseSWR Hook از کتابخانه SWR می آید. نقطه پایانی URL را به عنوان اولین آرگومان دریافت می کند و آن را به تابع fetcher به عنوان URL برای بازیابی داده ها ارسال می کند.

در نهایت، تابع refreshInterval گزینه ای برای تعیین زمان بازخوانی صفحه وب است. این بدان معناست که SWR پس از هر ثانیه داده‌ها را از نقطه پایانی api/get-users به‌روزرسانی می‌کند تا بتوانیم داده‌ها را ببینیم، یعنی کاربری که در زمان واقعی ایجاد می‌شود بدون نیاز به رفرش صفحه. سپس داده های useSWR Hook برای نمایش نام و ایمیل کاربران در رابط کاربری نقشه برداری می شود.

هنگامی که این کاربر ایجاد می شود، در پایگاه داده ذخیره می شود و UI در زمان واقعی به روز می شود.

استفاده از getStaticProps برای واکشی داده ها در طول زمان ساخت

همانطور که در بخش‌های قبلی بحث شد، getStaticProps را می‌توان برای واکشی داده‌های خارجی در طول زمان ساخت و ارسال آن به عنوان یک پایه برای کامپوننت که از داده‌ها استفاده می‌کند، استفاده کرد.

در داخل پوشه pages یک پوشه جدید به نام user ایجاد کنید. در داخل این پوشه، یک فایل index.js ایجاد کنید و یک کامپوننت اصلی React را در داخل آن راه اندازی کنید. بیایید ببینیم چگونه می توانیم این کار را با کد زیر انجام دهیم:

import React from "react";

const Users = () => {
return (
<div>
<h1>List of our Users</h1>
</div>
);
};

export default Users;

سپس، yarn dev را در ترمینال خود اجرا کنید تا پیش‌نمایش ظاهر صفحه در مرورگر را مشاهده کنید.

حالا بیایید از getStaticProps برای واکشی داده های خارجی استفاده کنیم و آن را به عنوان یک پایه به کامپوننت Users منتقل کنیم:

import React from "react";

const Users = ({ users }) => {
return (
<div>
<h1>List of our Users</h1>

{users.map((user) => (
<div key={user.id}>
<h2 style={{ color: "#A76F6F" }}>{user.name}</h2>
</div>
))}
</div>
);
};

export default Users;

export const getStaticProps = async () => {
const res = await fetch("https://jsonplaceholder.typicode.com/users");
const users = await res.json();

return {
props: { users },
};
};

در کد بالا، تابع getStaticProps برای واکشی داده های خارجی از نقطه پایانی استفاده شده است. این تابع یک شیء را برمی گرداند که تمام داده های کاربران را دارد. داده‌های کاربر از getStaticProps آرایه‌ای است که به کامپوننت Users ارسال می‌شود، سپس map می‌شود و نام هر کاربر در UI ارائه می‌شود.

این به این معنی است که وقتی برنامه خود را با استفاده از next-build می‌سازید، عملکرد را برای دریافت داده‌های خارجی اجرا می‌کند و سپس فایل HTML را برای پیش‌رندر کردن تولید می‌کند.

استفاده از Prisma برای واکشی داده با تابع getStaticProps

Prisma می تواند برای کوئری داده ها به طور مستقیم در تابع getStaticProps برای واکشی داده ها در زمان ساخت و ارسال آن به یک کامپوننت/صفحه در یک prop استفاده شود. از آنجایی که getStaticProps فقط در سمت سرور اجرا می شود، هرگز در سمت کلاینت اجرا نمی شود. با این کار می توانیم کوئریهای پایگاه داده را مستقیماً در داخل این تابع بنویسیم بدون اینکه به مرورگرها ارسال شود.

واکشی استاتیک داده ها با استفاده از Prisma

در این بخش به نحوه ایجاد صفحه با استفاده از Prisma برای واکشی ایستا داده ها خواهیم پرداخت. ما قبلاً یک مثال یکپارچه سازی در بخش قبلی داریم، اما داده های کاربر در تابع getStaticProps با استفاده از Prisma واکشی نشده است.

برای شروع، یک پوشه جدید در دایرکتوری صفحه به نام users-prisma-static با فایل index.js ایجاد کنید. اکنون ما به طور خودکار مسیر users-prisma-static/ را داریم که کامپوننت را در فایل index.js رندر می کند.

در داخل فایل index.js، یک کامپوننت ساده ایجاد کنید:

import React from "react";

const GetAllUsersWithPrismaStaticProps = ({ users }) => {
return (
<div>
<h1>GetAllUsersWithPrismaStaticProps</h1>
</div>
);
};

export default GetAllUsersWithPrismaStaticProps;

هنگام دسترسی به روت users-prisma-static، باید این را ببینید.

اکنون می توانیم داده های پایگاه داده خود را مستقیماً با استفاده از Prisma در تابع getStaticProps، هنوز در همان فایل index.js کوئری کنیم:

export const getStaticProps = async () => {
const res = await prisma.user.findMany();
const users = res.map((user) => {
return {
...user,
createdAt: user.createdAt.toString(),
updatedAt: user.updatedAt.toString(),
};
});

return {
props: { users },
};
};

در اینجا، تابع getStaticProps را تعریف کرده ایم. ما از نمونه کلاینت Prisma برای بازیابی لیستی از همه کاربران از پایگاه داده استفاده کردیم. پس از آن، ما روی پاسخ برگشتی نگاشت کردیم تا مقادیر createAt و updatedAt را به رشته تبدیل کنیم. این شی کاربر پردازش شده سپس به عنوان props ارسال می شود.

این کار به این دلیل انجام می‌شود که وقتی از getStaticProps در Next.js برای واکشی داده‌ها استفاده می‌کنید، داده‌هایی که به‌عنوان پروپوزال ارسال می‌کنید باید JSON-Serializable باشند، به این معنی که باید در قالب JSON باشند. مقدار بازگشتی createAt و updatedAt از پایگاه داده یک شی تاریخ است که با JSON قابل سریال‌سازی نیست.

بنابراین، برای اینکه مقادیر شیء تاریخ برگردانده شده برای هر دو فیلد را با JSON-Serializable تبدیل کنیم، آنها را به رشته ای تبدیل می کنیم تا تاریخ را در قالب استاندارد شده ای که JSON-Serializable است، برگردانیم.

بیایید شیء کاربرانی را که به عنوان یک پایه در کامپوننت GetAllUsersWithPrismaStaticProps بازگردانده شده است، ارسال کنیم و لیست کاربران را در UI ارائه دهیم:

import React from "react";
const { PrismaClient } = require("@prisma/client");

const prisma = new PrismaClient();

const GetAllUsersWithPrismaStaticProps = ({ users }) => {
return (
<div>
<h1>GetAllUsersWithPrismaStaticProps</h1>

<h2> List of fetched users </>

{users.map((user) => (
<div key={user.id}>
<h2>{user.name}</h2>
<p>{user.email}</p>
</div>
))}
</div>
);
};

export default GetAllUsersWithPrismaStaticProps;

export const getStaticProps = async () => {
const res = await prisma.user.findMany();
const users = res.map((user) => {
return {
...user,
createdAt: user.createdAt.toString(),
updatedAt: user.updatedAt.toString(),
};
});

return {
props: { users },
};
};

مقیاس بندی و بهینه سازی کوئریهای پایگاه داده با استفاده از Prisma Client

تمرین خوب است که هنگام ساخت برنامه های وب همیشه مقیاس و بهینه سازی را در نظر بگیرید. هنگامی که یک کاربر درخواستی را به صفحه وب ما ارسال می کند، یک عملکرد بدون سرور را راه اندازی می کند که اتصال جدیدی به پایگاه داده باز می کند. در زمینه برنامه‌ای که به تازگی ساخته‌ایم، هر زمان که کاربر فرمی را برای ایجاد یک کاربر جدید ارسال می‌کند، یک اتصال جدید به پایگاه داده MySQL ایجاد می‌کند.

فرض کنید 10 کاربر فرم را ارسال کنند. یعنی 10 تابع بدون سرور فراخوانی می شود و 10 اتصال به پایگاه داده ما ایجاد می شود. به طور معمول، محدودیت اتصال در پایگاه داده MySQL وجود دارد و مهم است که هنگام تنظیم و مدیریت یک سرور پایگاه داده MySQL از این پارامتر آگاه باشید.

اگر از پایگاه داده MySQL استفاده می کنید، می توانید به پایگاه داده متصل شوید و حداکثر محدودیت اتصال را با این دستور بررسی کنید:

SHOW VARIABLES LIKE "max_connections";

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

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

Prisma یک مخزن اتصال به نام Prisma Data Proxy ارائه می دهد. Data Proxy در بین توابع بدون سرور و پایگاه داده ما یافت می شود تا از مشکلات ادغام اتصال جلوگیری شود، که به کاهش تأخیر در برنامه ما و بهبود مقیاس بندی کمک می کند.

نتیجه

در این مقاله، طیف وسیعی از ویژگی های Next.js را بررسی کردیم. ما با مقدمه ای بر Next.js و Prisma شروع کردیم، سپس به تولید سایت استاتیک و مزایای آن پرداختیم. ما همچنین راهنمای دقیقی در مورد راه اندازی Prisma با Next.js به همراه نمایشی از واکشی داده ها با استفاده از SSG ارائه کردیم. همچنین در مورد ایجاد توابع بدون سرور با استفاده از Next.js API جفت شده با Prisma بحث کردیم. برای نتیجه گیری، ما پروکسی داده و تکنیک های بهینه سازی کوئریهای پایگاه داده با استفاده از Prisma Client را پوشش دادیم.