قدم‌های اول برای استارت با Next.js
قدم‌های اول برای استارت با Next.js
برای شروع عمل با Next.js نیز به اطراف Node.js نیاز داریم. بی آلایش‌ترین طرز ساخت‌و‌ساز یک پروژه Next.js به کار گیری از CLI قانونی create-next-app میباشد. طبق مستندات قانونی Next.js، این ابزار «سریع‌ترین رویه برای آغاز با Next.js» میباشد و به شما امداد می‌نماید سوای تنظیمات مازاد یک نرم افزار طراحی اپلیکیشن در مشهد نو بسازید. برای مثال:
bash
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
با این دستورها، پروژه‌ای با پوسته پیش‌فرض Next.js ساخت گردیده و در فولدر my-next-app پوشه‌های اول ساخته می شوند. فرمان npm run dev وب سایت را در وضعیت گسترش انجام می‌نماید و معمولاً در نشانی http://localhost:3000 قابل مشاهده میباشد.
ساختار پروژه Next.js مشتمل بر فولدر pages میباشد که هر فولدر درون آن تبدیل به یک مسیر (Route) در تارنما می گردد. به عنوان مثالً پوشه pages/index.js ورقه اساسی وبسایت را تمجید می‌نماید و pages/about.js کاغذ‌ای با نشانی /about تولید می‌نماید. در ذیل مثال‌ای از پوشه pages/index.js را میبینید:
jsx
export default function Home() {
return (
خانه
به اولین وبسایت ساخته شده با Next.js خوش آمدید!
);
}
خلال این، برای به‌دست آوردن داده‌های سروری و ارتقا سئو، می توانید از توابع getStaticProps یا این که getServerSideProps استعمال فرمایید. به عنوان مثال، فرض نمایید بخواهیم داده‌ای از یک API اخذ کنیم و در هنگام ساخت وب سایت روی آن پیاده‌سازی کنیم:
jsx
export async function getStaticProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
const post = await res.json();
return { props: { post } };
}export default function Home({ post }) {
return (
پست مثال
{post.title}
{post.body}
);
}
در‌این نمونه، Next.js داده را در طول تشکیل داد (SSG) اخذ و کاغذ را با محتوای بی نقص HTML رندر می‌نماید. این شغل منجر میگردد بازدیدکننده و موتورهای کاوش فارغ از بار گذاری مازاد جاوااسکریپت، محتوای برگه را ببینند که همین قضیه تلاش و بهینه سازی را بهبود می دهد.
همینطور Next.js دارنده سیستم مسیریابی توسعه یافته‌ای میباشد. فرض فرمائید بخواهیم صفحه های داینامیک برای یک‌سری مقاله وب لاگ بسازیم. قادر خواهیم بود فولدر pages/posts/[id].js را تولید کنیم و با استعمال از getStaticPaths و getStaticProps نشانی‌های مختلفی را تعریف و تمجید کنیم:
jsx
// pages/posts/[id].js
export async function getStaticPaths() {
return { paths: [{ params: { id: '1' } }, { params: { id: '2' } }], fallback: false };
}export async function getStaticProps({ params }) {
const res = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
const post = await res.json();
return { props: { post } };
}export default function Post({ post }) {
return (
پست شماره {post.id}
{post.title}
{post.body}
);
}
با این ساختار، به ازای هر id تمجید گردیده یک برگه استاتیک ساخته میگردد (از جملهً /posts/1 و /posts/2). Next.js به‌طور اتومات این مسیرها را شناسایی می‌نماید و HTML فراهم را ساخت و ساز می‌نماید.
نمونه عملی: پیاده سازی یک بلاگ بی آلایش با Next.js
تحت عنوان یک نمونه عملی، فرض نمایید می خواهیم یک بلاگ بی آلایش با React و Next.js پیاده سازی کنیم. آغاز با npx create-next-app یک پروژه نو میسازیم و ساختار فولدر‌ها را فراهم میکنیم. صفحه ها اساسی مانند کاغذ اساسی (pages/index.js) و صفحه های نوشته‌ها (pages/posts/[id].js) را طبق نمونه بالا ساخت‌و‌ساز می کنیم. در مرحله سپس، می توانیم یک فولدر JSON یا این که یک منبع داده (مثل WordPress API یا این که یک پوشه markdown) برای نوشته‌ها مهیا کنیم و با getStaticProps آنها‌را در حین ایجاد کرد وارد کاغذ کنیم.
در نصیب اکران پست‌ها، از تگ جانور در next/link به کارگیری می کنیم تا لینک و پیوند‌دهی در میان صفحه ها سوای لود دوباره تک تک نرم افزار صورت پذیرد. به صورت خلاصه، فرآیند شغل اینگونه خواهد بود:
تولید پروژه با create-next-app و اجرای آن (Next.js در وضعیت توسعه و گسترش).
تعریف‌و‌تمجید صفحه های: index.js برای فهرست بلاگ و [id].js برای جزئیات هر نوشته.
به کارگیری از getStaticProps و getStaticPaths برای اخذ داده‌های بلاگ و پیش‌ایجاد کرد صفحه ها.
اضافه کردن کدهای JSX برای اکران تیتر و محتوای نوشته‌ها.
استعمال از پست ۱ در کاغذ اساسی برای هدایت مخاطب به صفحه های نوشته.
اجرای npm run build و npm start برای رسیدگی تلاش پایانی در گوشه و کنار ساخت و ساز.
با تعقیب کردن این فرآیند، یک بلاگ معمولی ساخت‌و‌ساز می گردد که در لود اول سرعت بالا و اکران محتوای بدون نقص HTML را دارااست و از سئو مطلوب فایده می برد. می توانید همین مراحل را برای بقیه پروژه‌های خویش مانند فروشگاه آنلاین یا این که پرتفوی نیز بکار برید؛ به عنوان مثالً صفحه های تولید ها را با SSR عرضه نمائید تا موتور کاوش آنها را سریع‌خیس ایندکس نماید.