استفاده از Next.js برای مدیریت مسیرها
Next.js به‌عنوان یکی از برترین چارچوب‌های React، امکانات زیادی برای مدیریت مسیرها به کمک صفحات صفحات یا Page Router ارائه می‌دهد. این ویژگی به ما کمک می‌کند تا برنامه‌های وب پویا با ساختار مناسب و دسترسی کاربرپسند بسازیم. یکی از مزیت‌های استفاده از صفحات سفارشی یا Custom Document این است که می‌توانیم به صورت مستقیم به ساختار پایه فایل‌های HTML دسترسی داشته باشیم و قابلیت‌هایی همچون تنظیمات جهانی یا اضافه کردن برچسب‌هایی خاص به همه صفحات را اعمال کنیم. این مقاله قصد دارد تا به شما یاد دهد که چطور می‌توانید یک Custom Document در پروژه Next.js خود ایجاد و از آن بهره‌مند شوید.
در Next.js، فایل _document.js به شما اجازه می‌دهد تا قالب HTML پایه برای صفحات کل سایت را تغییر دهید. این ویژگی به شما امکان می‌دهد تا تگ‌های متا را اضافه کنید، و یا از فونت‌های سفارشی استفاده کنید. در حالی که اغلب قابلیت‌ها بدون نیاز به ویرایش این فایل در Next.js امکان‌پذیر است، ساختار HTML پایه همیشه قابل سفارشی‌سازی است.
برای شروع، نیازی به ایجاد یک فایل جدید به نام _document.js در دایرکتوری /pages دارید. در این فایل، کامپوننت خود را به صورت زیر تعریف کنید:
import Document, { Html, Head, Main, NextScript } from 'next/document';
class MyDocument extends Document {
render() {
return (
<Html>
<Head>
<!-- تنظیمات و تگ‌های دلخواه در اینجا -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" />
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
export default MyDocument;
در اینجا توضیحات خط به خط کد مطرح شده است:
import Document, { Html, Head, Main, NextScript } from 'next/document';
ابتدای سند شما با import کردن ماژول‌های مورد نیاز از Next.js شکل می‌گیرد. این موارد شامل کامپوننت‌هایی برای ایجاد ساختار HTML سفارشی می‌شوند.
class MyDocument extends Document {
کلاس MyDocument با گسترش از Document ایجاد شده است که به شما امکان می‌دهد ساختار پیش‌فرض HTML را تغییر دهید.
render() {
متد render وظیفه تولید محتوای HTML را بر عهده دارد.
درون return ( ... )
، ساختار HTML که باید برگشت داده شود تعریف می‌شود.
<Html>
تگ <Html> نشان دهنده شروع ساختار HTML سند می‌باشد.
<Head></Head>
تگ <Head> شامل تمامی تگ‌های HTML اضافی است که در همه صفحات باید حضور داشته باشد.
<body></body>
تگ <body> نشان‌دهنده‌ی بخش اصلی محتوای صفحه است که توسط تگ‌های Main و NextScript تکمیل می‌گردد.