آموزش Next.js یکی از بهترین راهها برای تسلط بر توسعه وبسایتها و اپلیکیشنهای مدرن است. در این مقاله، ما به بررسی پروژههای عملی با Next.js خواهیم پرداخت و تمامی جنبههای این فریمورک قدرتمند را از سطح مبتدی تا پیشرفته پوشش خواهیم داد. هدف ما این است که به شما کمک کنیم تا مهارتهای خود را در ساخت وبسایتهای پیچیده، فروشگاههای آنلاین، بلاگها و داشبوردهای مدیریتی با Next.js تقویت کنید.
ایجاد یک وبسایت کامل با Next.js
Next.js یکی از قدرتمندترین فریمورکها برای ساخت وبسایتها و اپلیکیشنهای وب است که امکانات زیادی برای توسعهدهندگان فراهم میآورد. یکی از ویژگیهای برجسته Next.js، امکان ساخت وبسایتهای واکنشگرا و داینامیک است. در این بخش، به طور جامعتر به ایجاد یک وبسایت کامل با Next.js میپردازیم و ویژگیهای مختلف این فریمورک را بررسی میکنیم.
طراحی و پیادهسازی یک وبسایت واکنشگرا (Responsive)
یکی از دغدغههای اصلی در طراحی وبسایتها، سازگاری با انواع دستگاهها و اندازههای صفحه نمایش است. Next.js این امکان را فراهم میکند که وبسایتهای واکنشگرا را با استفاده از ابزارهای مدرن و بهترین شیوهها بسازید.
1. استفاده از Media Queries در CSS
برای ساخت وبسایتهای واکنشگرا، از Media Queries در CSS میتوانیم استفاده کنیم. Media Queries به ما این امکان را میدهند که استایلهای مختلف را بسته به اندازه صفحه نمایش و نوع دستگاه اعمال کنیم. به عنوان مثال، میتوانیم طراحی سایت را طوری تنظیم کنیم که در موبایلها به صورت عمودی نمایش داده شود، در حالی که در دسکتاپها به صورت افقی نمایش داده شود.
/* برای نمایش در دستگاههای موبایل */
@media (max-width: 768px) {
body {
font-size: 14px;
}
.container {
flex-direction: column;
}
}
/* برای نمایش در دسکتاپ */
@media (min-width: 769px) {
body {
font-size: 16px;
}
.container {
flex-direction: row;
}
}
2. استفاده از Flexbox و Grid برای چیدمان
یکی دیگر از تکنیکهای محبوب برای ساخت وبسایتهای واکنشگرا، استفاده از Flexbox و CSS Grid است. این دو ابزار CSS به ما کمک میکنند تا چیدمانهای پیچیده را بدون نیاز به استفاده از float یا positioning به راحتی طراحی کنیم.
مثال زیر نحوه استفاده از Flexbox را برای چیدمان واکنشگرا نشان میدهد:
.container {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.item {
flex: 1 1 200px;
margin: 10px;
}
این کد تضمین میکند که آیتمها در صفحه به صورت خودکار در اندازههای مختلف صفحه نمایش مرتب شوند و چیدمان به شکل مناسب تنظیم شود.
3. بهینهسازی تصاویر با Image Optimization
یکی از ویژگیهای برجسته Next.js، بهینهسازی خودکار تصاویر است. Next.js به طور خودکار تصاویر را بر اساس اندازه صفحه نمایش و ویژگیهایی مثل کیفیت و رزولوشن، بهینه میکند. این ویژگی به خصوص در دستگاههای موبایل که سرعت اینترنت ممکن است محدود باشد، بسیار مفید است.
در کد زیر، نحوه استفاده از کامپوننت <Image /> برای بهینهسازی تصاویر در Next.js آورده شده است:
import Image from 'next/image'
export default function Home() {
return (
<div>
<h1>به وبسایت ما خوش آمدید</h1>
<Image
src="/image.jpg"
alt="Example"
width={500}
height={300}
layout="responsive"
/>
</div>
)
}
در این مثال، با استفاده از ویژگیهای Next.js، تصویر به طور خودکار با اندازه مناسب برای نمایشگرهای مختلف بهینه میشود و از ترافیک اضافی جلوگیری میکند.
ادغام با CMS مانند Contentful، Strapi یا Sanity
برای مدیریت محتوای وبسایتهای داینامیک، میتوانید از سیستمهای مدیریت محتوا (CMS) استفاده کنید. این CMSها به شما این امکان را میدهند که محتوای سایت خود را بدون نیاز به تغییر در کدهای پایه، به راحتی ویرایش و مدیریت کنید. از جمله CMSهای محبوب میتوان به Contentful، Strapi و Sanity اشاره کرد.
1. استفاده از Contentful برای مدیریت محتوا
با استفاده از Contentful، شما میتوانید محتوای خود را در این سیستم ذخیره کنید و سپس آن را با استفاده از API در صفحات Next.js بارگذاری کنید. به این ترتیب، محتوای سایت شما به راحتی قابل مدیریت و بهروز رسانی خواهد بود.
در زیر نحوه استفاده از API Contentful در Next.js آورده شده است:
import { createClient } from 'contentful'
const client = createClient({
space: 'your_space_id',
accessToken: 'your_access_token'
})
export async function getStaticProps() {
const res = await client.getEntries({ content_type: 'your_content_type' })
return { props: { posts: res.items } }
}
این کد با استفاده از getStaticProps دادهها را از Contentful دریافت کرده و به صفحه شما ارسال میکند.
2. استفاده از Strapi برای مدیریت محتوای داینامیک
Strapi یک CMS متن باز است که به شما امکان میدهد APIهای سفارشی بسازید و به راحتی دادهها را مدیریت کنید. با اتصال Strapi به Next.js میتوانید دادههای داینامیک را از سرور بارگذاری کنید.
import fetch from 'node-fetch'
export async function getStaticProps() {
const res = await fetch('http://localhost:1337/articles')
const data = await res.json()
return { props: { articles: data } }
}
این کد دادهها را از API Strapi دریافت کرده و به صفحه شما ارسال میکند.
مدیریت محتوای دینامیک و استاتیک
یکی از ویژگیهای قدرتمند Next.js این است که میتوانید از ترکیب دو نوع محتوای دینامیک و استاتیک برای ایجاد وبسایتهایی با عملکرد بالا استفاده کنید. این ویژگی، به ویژه برای وبسایتهایی که نیاز به بارگذاری سریع و محتوای بهروز دارند، بسیار مفید است.
1. بارگذاری محتوای استاتیک با getStaticProps
Next.js از طریق getStaticProps این امکان را میدهد که محتوای استاتیک را پیش از بارگذاری صفحه به طور ایستا دریافت کنید. این قابلیت برای صفحاتی که تغییرات کمتری دارند یا نیاز به بهروزرسانیهای کم دارند، بسیار مناسب است.
export async function getStaticProps() {
return {
props: {
content: 'این یک محتوای استاتیک است',
},
}
}
2. بارگذاری محتوای دینامیک با getServerSideProps
اگر نیاز دارید که محتوای وبسایت شما همیشه بهروز باشد، میتوانید از getServerSideProps استفاده کنید. این متد هر بار که صفحه درخواست شود، اطلاعات جدید را از سرور بارگذاری میکند.
export async function getServerSideProps() {
return {
props: {
content: 'این یک محتوای دینامیک است',
},
}
}
با استفاده از این قابلیت، میتوانید وبسایتهایی بسازید که هم محتوای استاتیک با بارگذاری سریع دارند و هم محتوای دینامیک که همیشه بهروز است.در این بخش، به صورت کامل به نحوه ایجاد یک وبسایت کامل با Next.js پرداخته شد. ویژگیهای برجستهای مانند طراحی واکنشگرا، ادغام با CMSهای محبوب، و مدیریت محتوای استاتیک و دینامیک، امکان ساخت وبسایتهای قدرتمند و بهینه را برای توسعهدهندگان فراهم میآورد. با استفاده از ابزارهای پیشرفتهای که Next.js در اختیار شما قرار میدهد، میتوانید وبسایتهایی بسازید که هم از نظر عملکرد و هم از نظر طراحی با سایر وبسایتها رقابت کنند.
ایجاد یک فروشگاه آنلاین با Next.js و Shopify
ساخت یک فروشگاه آنلاین امروزه به یکی از نیازهای اساسی برای کسبوکارهای مختلف تبدیل شده است. Next.js به عنوان یک فریمورک مدرن برای ساخت وبسایتهای سریع و بهینه، امکانات زیادی برای توسعهدهندگان فراهم میکند. یکی از قابلیتهای جذاب این فریمورک، ادغام آن با سیستمهای مدیریت فروش مانند Shopify است. در این بخش، به شما نشان خواهیم داد که چگونه میتوانید یک فروشگاه آنلاین با استفاده از Next.js و Shopify راهاندازی کنید و محصولات، سبد خرید و پرداختها را به راحتی مدیریت کنید.
اتصال به API Shopify
Shopify یکی از محبوبترین پلتفرمهای تجارت الکترونیکی است که به شما این امکان را میدهد تا فروشگاه آنلاین خود را بسازید و آن را به راحتی مدیریت کنید. یکی از روشهای قدرتمند برای تعامل با Shopify، استفاده از Shopify API است که به شما این امکان را میدهد تا محصولات خود را در فروشگاه آنلاین خود مدیریت کنید و اطلاعات آنها را در صفحات Next.js بارگذاری کنید.
نحوه اتصال به Shopify API
برای شروع، باید یک API key از Shopify دریافت کنید که به شما این اجازه را میدهد تا به دادههای فروشگاه خود دسترسی پیدا کنید. سپس از این اطلاعات برای اتصال به API استفاده میکنید.
در کد زیر، نشان دادهایم که چگونه میتوانید با استفاده از fetch دادههای مربوط به محصولات را از فروشگاه Shopify خود بارگذاری کنید و آنها را در صفحات Next.js نمایش دهید.
import fetch from 'node-fetch'
export async function getServerSideProps() {
const res = await fetch('https://your-shopify-store.myshopify.com/admin/api/2021-07/products.json', {
headers: {
'X-Shopify-Access-Token': 'your-access-token',
},
})
const data = await res.json()
return {
props: { products: data.products },
}
}
در این کد:
از fetch برای ارسال درخواست به Shopify API استفاده میکنیم.
با استفاده از X-Shopify-Access-Token، به فروشگاه خود احراز هویت میکنیم.
دادههای محصولات به صورت JSON از API Shopify دریافت شده و به صفحه ارسال میشوند تا در رابط کاربری نمایش داده شوند.
با این روش، میتوانید محصولات خود را به صورت داینامیک از Shopify بارگذاری کنید و آنها را در صفحات مختلف فروشگاه آنلاین خود نمایش دهید.
توضیحات بیشتر درباره استفاده از Shopify API
Shopify API امکانات زیادی برای مدیریت فروشگاه و محصولات فراهم میآورد. برخی از قابلیتهای این API عبارتند از:
دریافت اطلاعات محصولات: شامل نام، قیمت، توضیحات و تصاویر محصولات.
مدیریت موجودی: بررسی موجودی محصولات و بهروزرسانی آنها.
مدیریت سفارشات: بررسی وضعیت سفارشات مشتریان، وضعیت پردازش، ارسال و غیره.
مدیریت مشتریان: ثبت و مدیریت اطلاعات مشتریان و تاریخچه خرید آنها.
برای دسترسی به این API، باید یک Access Token از پنل مدیریت Shopify خود دریافت کنید و آن را در درخواستهای API خود استفاده کنید.
مدیریت محصولات، سبد خرید و پرداختها
یکی از اصلیترین ویژگیهایی که باید در یک فروشگاه آنلاین پیادهسازی کنید، مدیریت محصولات، سبد خرید و پرداختها است. با استفاده از APIهای Shopify و کتابخانههای کمکی مانند Shopify Buy SDK، میتوانید این امکانات را به راحتی به فروشگاه آنلاین خود اضافه کنید.
1. مدیریت محصولات
با استفاده از Shopify API، شما میتوانید محصولات را اضافه، ویرایش و حذف کنید. همچنین، اطلاعات مربوط به هر محصول، از جمله نام، قیمت، تصاویر و توضیحات را دریافت و در صفحات فروشگاه نمایش دهید.
در اینجا نحوه بارگذاری محصولات و نمایش آنها در صفحه فروشگاه آورده شده است:
import { useEffect, useState } from 'react'
const ProductList = () => {
const [products, setProducts] = useState([])
useEffect(() => {
// درخواست به API Shopify
const fetchProducts = async () => {
const response = await fetch('/api/products')
const data = await response.json()
setProducts(data.products)
}
fetchProducts()
}, [])
return (
<div>
<h2>محصولات فروشگاه</h2>
<div className="product-list">
{products.map((product) => (
<div key={product.id} className="product-item">
<img src={product.image.src} alt={product.title} />
<h3>{product.title}</h3>
<p>{product.body_html}</p>
<p>قیمت: {product.variants[0].price} تومان</p>
</div>
))}
</div>
</div>
)
}
export default ProductList
در این کد:
محصولات از Shopify API بارگذاری میشوند و در داخل یک state ذخیره میشوند.
سپس این محصولات به صورت داینامیک در صفحه به نمایش در میآیند.
2. مدیریت سبد خرید
مدیریت سبد خرید در فروشگاه آنلاین بسیار مهم است. با استفاده از Shopify Buy SDK، شما میتوانید سبد خرید مشتری را مدیریت کنید و این امکان را فراهم کنید که محصولات به سبد خرید اضافه شوند.
برای استفاده از Shopify Buy SDK، ابتدا باید آن را نصب کنید:
npm install @shopify/buy-button-js
سپس با استفاده از این کتابخانه، میتوانید یک سبد خرید بسازید و محصولاتی که کاربران انتخاب کردهاند را ذخیره کنید:
import Client from 'shopify-buy'
const client = Client.buildClient({
domain: 'your-shopify-store.myshopify.com',
storefrontAccessToken: 'your-access-token',
})
const createCart = async () => {
const cart = await client.checkout.create()
return cart
}
const addToCart = async (cart, variantId, quantity) => {
const lineItem = await client.checkout.addLineItems(cart.id, [{
variantId,
quantity
}])
return lineItem
}
در این کد:
با استفاده از Shopify Buy SDK، یک cart (سبد خرید) ایجاد میکنیم.
سپس میتوانیم محصولات را با استفاده از variantId به سبد خرید اضافه کنیم.
3. پرداخت آنلاین
یکی از ویژگیهای مهم در فروشگاههای آنلاین، پرداخت آنلاین است. Shopify از درگاههای پرداخت مختلف پشتیبانی میکند و شما میتوانید از آنها برای انجام تراکنشهای مالی در فروشگاه خود استفاده کنید.
برای انجام تراکنشها، شما باید از API Shopify برای ایجاد یک checkout استفاده کنید. پس از ایجاد checkout، میتوانید آن را به درگاه پرداخت هدایت کنید.
const createCheckout = async (lineItems) => {
const checkout = await client.checkout.create()
const checkoutWithItems = await client.checkout.addLineItems(checkout.id, lineItems)
return checkoutWithItems
}
const redirectToCheckout = (checkoutUrl) => {
window.location.href = checkoutUrl
}
در اینجا:
یک checkout جدید ایجاد میکنیم.
سپس محصولات را به آن اضافه کرده و کاربر را به صفحه پرداخت هدایت میکنیم.
4. ایجاد صفحات محصول و دستهبندی
برای نمایش جزئیات هر محصول و دستهبندیها در فروشگاه، شما میتوانید صفحات جداگانهای برای هر محصول ایجاد کنید. با استفاده از Next.js، این صفحات به راحتی با استفاده از ویژگیهای getStaticProps یا getServerSideProps ساخته میشوند.
import { useRouter } from 'next/router'
const ProductPage = ({ product }) => {
const router = useRouter()
if (router.isFallback) {
return <div>در حال بارگذاری...</div>
}
return (
<div>
<h1>{product.title}</h1>
<img src={product.image.src} alt={product.title} />
<p>{product.body_html}</p>
<p>قیمت: {product.variants[0].price} تومان</p>
</div>
)
}
export async function getStaticPaths() {
const products = await fetchProducts()
const paths = products.map(product => ({
params: { id: product.id.toString() }
}))
return { paths, fallback: true }
}
export async function getStaticProps({ params }) {
const product = await fetchProductById(params.id)
return { props: { product } }
}
export default ProductPage
در این کد:
از getStaticProps برای بارگذاری دادهها برای صفحه محصول استفاده میکنیم.
از getStaticPaths برای پیشساخت صفحات مربوط به هر محصول استفاده میشود.
ایجاد یک بلاگ با Next.js و Markdown
ساخت یک بلاگ با Next.js و Markdown یکی از پروژههای محبوب و کاربردی است که میتوان با استفاده از این فریمورک قدرتمند ایجاد کرد. استفاده از Markdown برای نوشتن مقالات و پستها یک روش ساده، کارآمد و قابل فهم است. علاوه بر این، Next.js این امکان را فراهم میکند که به راحتی محتوای Markdown را بارگذاری، پردازش و نمایش دهیم. در این بخش، به طور کامل نحوه ساخت یک بلاگ با استفاده از Next.js و Markdown را بررسی خواهیم کرد و به جنبههای مختلف آن پرداخته میشود.
مدیریت محتوای بلاگ با فایلهای Markdown
Markdown یک زبان نشانهگذاری سبک است که برای نوشتن پستها و مقالات بلاگ بسیار مناسب است. با استفاده از Markdown، میتوانید محتوای بلاگ خود را به سادگی بنویسید و سپس آن را در صفحات وب نمایش دهید. یکی از مزایای استفاده از Markdown این است که به راحتی میتوان آن را ویرایش کرد و به محتوای متنی پیچیده تبدیل نمیشود.
در این بخش، نحوه بارگذاری و نمایش فایلهای Markdown در Next.js را بررسی میکنیم.
1. ساخت فایلهای Markdown برای بلاگ
ابتدا برای هر پست بلاگ یک فایل Markdown ایجاد میکنیم. این فایلها معمولاً در پوشهای به نام posts ذخیره میشوند. هر فایل Markdown باید شامل محتوا و اطلاعات متا (مانند عنوان، تاریخ و برچسبها) باشد. برای ذخیره اطلاعات متا، معمولاً از فرمت YAML Front Matter استفاده میشود.
مثال فایل first-post.md:
--- title: "اولین پست بلاگ" date: "2023-01-01" tags: ["تکنولوژی", "نکات برنامهنویسی"] --- # عنوان پست این یک پست نمونه است که با استفاده از Markdown نوشته شده است.
این یک پست نمونه است که با استفاده از Markdown نوشته شده است.
در این مثال:
بخش YAML در بالای فایل شامل اطلاعات متا مانند عنوان، تاریخ و برچسبها است.
پس از بخش متا، محتوای اصلی پست با استفاده از Markdown نوشته میشود.
2. خواندن و پردازش فایلهای Markdown با Next.js
برای خواندن و پردازش فایلهای Markdown در Next.js، میتوان از پکیجهای مختلفی مانند gray-matter و remark استفاده کرد. در اینجا، از gray-matter برای استخراج اطلاعات متا و از remark برای تبدیل محتوای Markdown به HTML استفاده خواهیم کرد.
نکته: در این آموزش فرض میشود که تمامی فایلهای Markdown در پوشهای به نام posts ذخیره شدهاند.
import fs from 'fs'
import path from 'path'
import matter from 'gray-matter'
import remark from 'remark'
import html from 'remark-html'
export async function getStaticProps() {
// مسیر فایل Markdown
const filePath = path.join(process.cwd(), 'posts', 'first-post.md')
// خواندن محتوای فایل
const fileContents = fs.readFileSync(filePath, 'utf8')
// استخراج متا دیتا با استفاده از gray-matter
const { data, content } = matter(fileContents)
// تبدیل محتوای Markdown به HTML با استفاده از remark
const processedContent = await remark().use(html).process(content)
return {
props: {
title: data.title,
date: data.date,
tags: data.tags,
content: processedContent.toString(),
},
}
}
در این کد:
fs.readFileSync برای خواندن فایل Markdown استفاده میشود.
gray-matter برای استخراج دادههای متا مانند عنوان، تاریخ و برچسبها از بخش Front Matter استفاده میشود.
remark برای تبدیل محتوای Markdown به HTML و نمایش آن در صفحات وب استفاده میشود.
3. نمایش محتوا در صفحات Next.js
پس از خواندن و پردازش محتوای Markdown، میتوان آن را در صفحات Next.js به نمایش گذاشت. در اینجا نحوه نمایش محتوای پست بلاگ در صفحهای خاص را نشان میدهیم:
import React from 'react'
const PostPage = ({ title, date, tags, content }) => {
return (
<div>
<h1>{title}</h1>
<p>{date}</p>
<div>
<strong>برچسبها:</strong> {tags.join(', ')}
</div>
<div dangerouslySetInnerHTML={{ __html: content }} />
</div>
)
}
export default PostPage
در این کد:
اطلاعات متا مانند عنوان، تاریخ و برچسبها به صورت دستی در بالای صفحه نمایش داده میشوند.
محتوای اصلی پست با استفاده از dangerouslySetInnerHTML که اجازه میدهد HTML تولید شده از Markdown به طور مستقیم در JSX وارد شود، نمایش داده میشود.
پیادهسازی سیستم برچسبها و دستهبندیها
برای مدیریت برچسبها و دستهبندیها در بلاگ خود، میتوانید از ویژگیهای موجود در Markdown استفاده کنید. با اضافه کردن برچسبها به فایلهای Markdown و استفاده از آنها در Next.js، میتوانید سیستم دستهبندی و جستجوی مقالات مرتبط را پیادهسازی کنید.
1. فیلتر کردن پستها بر اساس برچسبها
برای دستهبندی پستها و نمایش پستهایی که برچسبهای مشابه دارند، میتوانید فایلهای Markdown را بر اساس برچسبها فیلتر کنید. در اینجا یک روش ساده برای فیلتر کردن پستها بر اساس برچسبهای انتخابی آورده شده است:
export async function getStaticProps() {
const postsDirectory = path.join(process.cwd(), 'posts')
const filenames = fs.readdirSync(postsDirectory)
const allPosts = filenames.map((filename) => {
const filePath = path.join(postsDirectory, filename)
const fileContents = fs.readFileSync(filePath, 'utf8')
const { data, content } = matter(fileContents)
const processedContent = remark().use(html).processSync(content)
return {
title: data.title,
date: data.date,
tags: data.tags,
content: processedContent.toString(),
}
})
// فیلتر کردن پستها بر اساس برچسبها
const filteredPosts = allPosts.filter(post =>
post.tags.includes('تکنولوژی') // مثلا فقط پستهایی که برچسب "تکنولوژی" دارند
)
return {
props: {
posts: filteredPosts,
},
}
}
در این کد:
ابتدا تمامی پستها از پوشه posts خوانده میشوند.
سپس برچسبهای هر پست استخراج شده و بر اساس آنها فیلتر میشود.
2. ایجاد لینکهای برچسبها در صفحات بلاگ
برای اینکه کاربران بتوانند پستهای مرتبط را بر اساس برچسبها مشاهده کنند، میتوانید لینکهای برچسبها را در هر پست قرار دهید و سپس با کلیک بر روی هر برچسب، پستهای مربوطه را نمایش دهید.
const PostPage = ({ title, date, tags, content }) => {
return (
<div>
<h1>{title}</h1>
<p>{date}</p>
<div>
<strong>برچسبها:</strong>
{tags.map((tag) => (
<a href={`/tags/${tag}`} key={tag}>{tag}</a>
))}
</div>
<div dangerouslySetInnerHTML={{ __html: content }} />
</div>
)
}
در اینجا:
برچسبهای هر پست به صورت لینکهای HTML نمایش داده میشوند.
با کلیک بر روی هر برچسب، به صفحهای که تمام پستهای مرتبط با آن برچسب را نمایش میدهد، هدایت میشود.
استفاده از Markdown و Next.js برای ساخت بلاگ یک روش ساده، انعطافپذیر و قدرتمند است. شما میتوانید به راحتی از فایلهای Markdown برای نوشتن پستها استفاده کرده و از ویژگیهای Next.js مانند getStaticProps برای بارگذاری، پردازش و نمایش محتوای بلاگ بهرهبرداری کنید. علاوه بر این، با استفاده از برچسبها و دستهبندیها میتوانید به کاربران خود اجازه دهید تا به راحتی پستهای مرتبط را پیدا کنند و تجربه کاربری بهتری ارائه دهید.
ایجاد یک داشبورد مدیریتی با Next.js
یکی از پروژههای عملی با Next.js که به توسعهدهندگان امکان میدهد تا مهارتهای خود را در ساخت اپلیکیشنهای پیچیدهتر و مدیریت دادهها تقویت کنند، ایجاد یک داشبورد مدیریتی است. داشبوردهای مدیریتی ابزارهای قدرتمندی هستند که به کاربران اجازه میدهند تا دادهها را به صورت بصری مشاهده، تحلیل و مدیریت کنند. در این بخش، به طور جامع به نحوه پیادهسازی یک داشبورد مدیریتی با استفاده از قابلیتهای پیشرفته Next.js میپردازیم.
پیادهسازی احراز هویت و مدیریت کاربران
یکی از اولین و مهمترین مراحل در ایجاد یک داشبورد مدیریتی، احراز هویت کاربران است. این امر تضمین میکند که تنها کاربران مجاز به دسترسی به اطلاعات حساس و امکانات مدیریتی دسترسی دارند. برای این منظور، میتوان از NextAuth.js که یک کتابخانه محبوب برای احراز هویت در Next.js است، استفاده کرد.
مراحل پیادهسازی احراز هویت با NextAuth.js
نصب NextAuth.js:
ابتدا باید NextAuth.js را در پروژه خود نصب کنید:
npm install next-auth
پیکربندی NextAuth.js:
سپس باید یک فایل API برای پیکربندی NextAuth.js ایجاد کنید. این فایل معمولاً در مسیر pages/api/auth/[…nextauth].js قرار میگیرد.
// pages/api/auth/[...nextauth].js
import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'
export default NextAuth({
providers: [
Providers.Credentials({
name: 'Credentials',
credentials: {
username: { label: "Username", type: "text" },
password: { label: "Password", type: "password" }
},
async authorize(credentials) {
// اعتبارسنجی کاربر با استفاده از اطلاعات وارد شده
const user = { id: 1, name: 'Admin', email: 'admin@example.com' }
if (credentials.username === 'admin' && credentials.password === 'password') {
return user
} else {
return null
}
}
})
],
session: {
jwt: true,
},
pages: {
signIn: '/auth/signin',
},
})
ایجاد صفحات ورود و ثبتنام:
شما نیاز به صفحات ورود و ثبتنام دارید تا کاربران بتوانند وارد سیستم شوند. به عنوان مثال، یک صفحه ورود ساده:
// pages/auth/signin.js
import { signIn } from 'next-auth/client'
import { useState } from 'react'
export default function SignIn() {
const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const handleSubmit = async (e) => {
e.preventDefault()
const result = await signIn('credentials', {
redirect: false,
username,
password,
})
if (result.ok) {
// هدایت به داشبورد پس از ورود موفق
window.location.href = '/dashboard'
} else {
// نمایش خطا در صورت ناموفق بودن ورود
alert('ورود ناموفق بود')
}
}
return (
<form onSubmit={handleSubmit}>
<label>
نام کاربری:
<input type="text" value={username} onChange={(e) => setUsername(e.target.value)} required />
</label>
<label>
رمز عبور:
<input type="password" value={password} onChange={(e) => setPassword(e.target.value)} required />
</label>
<button type="submit">ورود</button>
</form>
)
}
محافظت از صفحات داشبورد:
برای اطمینان از اینکه تنها کاربران احراز هویت شده به داشبورد دسترسی دارند، میتوانید از هوکهای احراز هویت استفاده کنید.
// pages/dashboard.js
import { useSession, getSession } from 'next-auth/client'
import { useEffect } from 'react'
import { useRouter } from 'next/router'
export default function Dashboard() {
const [session, loading] = useSession()
const router = useRouter()
useEffect(() => {
if (!loading && !session) {
router.push('/auth/signin')
}
}, [loading, session])
if (loading) return <div>در حال بارگذاری...</div>
if (!session) return null
return (
<div>
<h1>داشبورد مدیریتی</h1>
<p>خوش آمدید، {session.user.name}</p>
</div>
)
}
export async function getServerSideProps(context) {
const session = await getSession(context)
if (!session) {
return {
redirect: {
destination: '/auth/signin',
permanent: false,
},
}
}
return {
props: { session },
}
}
با پیادهسازی این مراحل، شما یک سیستم احراز هویت قوی و مطمئن برای داشبورد مدیریتی خود خواهید داشت که امنیت کاربران و دادههای شما را تضمین میکند.
نمایش دادهها با استفاده از نمودارها و جداول
یکی از ویژگیهای کلیدی داشبوردهای مدیریتی، نمایش دادهها به صورت بصری است. این کار با استفاده از نمودارها و جداول امکانپذیر میشود تا کاربران بتوانند به سرعت و به راحتی اطلاعات مهم را تحلیل کنند. برای این منظور، میتوان از کتابخانههایی مانند Chart.js یا Recharts برای نمودارها و React Table برای جداول استفاده کرد.
استفاده از Chart.js برای نمایش نمودارها
Chart.js یک کتابخانه جاوااسکریپت محبوب برای ایجاد نمودارهای تعاملی است. برای استفاده از آن در Next.js، ابتدا باید کتابخانه را نصب کنید:
npm install react-chartjs-2 chart.js
سپس میتوانید از آن برای ایجاد نمودارهای مختلف استفاده کنید:
// components/DashboardChart.js
import { Line } from 'react-chartjs-2'
const data = {
labels: ['ژانویه', 'فوریه', 'مارس', 'آوریل'],
datasets: [
{
label: 'فروش ماهیانه',
data: [65, 59, 80, 81],
fill: false,
backgroundColor: 'rgba(75,192,192,1)',
borderColor: 'rgba(75,192,192,1)',
},
],
}
const options = {
scales: {
y: {
beginAtZero: true,
},
},
}
export default function DashboardChart() {
return <Line data={data} options={options} />
}
و سپس آن را در صفحه داشبورد خود استفاده کنید:
// pages/dashboard.js
import DashboardChart from '../components/DashboardChart'
export default function Dashboard() {
// ... کد احراز هویت
return (
<div>
<h1>داشبورد مدیریتی</h1>
<DashboardChart />
{/* سایر اجزای داشبورد */}
</div>
)
}
استفاده از React Table برای نمایش دادهها در قالب جداول
React Table یک کتابخانه سبک و قابل انعطاف برای ایجاد جداول پویا در React است. برای نصب آن:
npm install react-table
سپس میتوانید از آن برای ایجاد جداول استفاده کنید:
// components/DataTable.js
import { useTable } from 'react-table'
export default function DataTable({ columns, data }) {
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
} = useTable({ columns, data })
return (
<table {...getTableProps()}>
<thead>
{headerGroups.map(headerGroup => (
<tr {...headerGroup.getHeaderGroupProps()}>
{headerGroup.headers.map(column => (
<th {...column.getHeaderProps()}>{column.render('Header')}</th>
))}
</tr>
))}
</thead>
<tbody {...getTableBodyProps()}>
{rows.map(row => {
prepareRow(row)
return (
<tr {...row.getRowProps()}>
{row.cells.map(cell => (
<td {...cell.getCellProps()}>{cell.render('Cell')}</td>
))}
</tr>
)
})}
</tbody>
</table>
)
}
و سپس آن را در داشبورد خود استفاده کنید:
// pages/dashboard.js
import DataTable from '../components/DataTable'
export default function Dashboard() {
// ... کد احراز هویت
const columns = React.useMemo(
() => [
{
Header: 'نام محصول',
accessor: 'name',
},
{
Header: 'فروش',
accessor: 'sales',
},
{
Header: 'موجودی',
accessor: 'stock',
},
],
[]
)
const data = React.useMemo(
() => [
{ name: 'محصول 1', sales: 100, stock: 20 },
{ name: 'محصول 2', sales: 150, stock: 30 },
{ name: 'محصول 3', sales: 200, stock: 25 },
],
[]
)
return (
<div>
<h1>داشبورد مدیریتی</h1>
<DashboardChart />
<DataTable columns={columns} data={data} />
{/* سایر اجزای داشبورد */}
</div>
)
}
با استفاده از این ابزارها، شما میتوانید دادههای پیچیده را به صورت بصری و قابل فهم به کاربران ارائه دهید و تجربه کاربری بهتری را فراهم کنید.
مدیریت دادهها با استفاده از API Routes و GraphQL
برای مدیریت دادهها در داشبورد مدیریتی، Next.js امکاناتی مانند API Routes و GraphQL را فراهم میکند که به شما امکان میدهد دادهها را به صورت موثرتر و منعطفتر مدیریت کنید.
استفاده از API Routes برای مدیریت دادهها
API Routes در Next.js به شما اجازه میدهند تا APIهای سفارشی خود را بسازید که میتوانند برای مدیریت دادهها، انجام عملیات CRUD (ایجاد، خواندن، بهروزرسانی، حذف) و تعامل با پایگاه دادهها استفاده شوند.
مثال ایجاد یک API Route برای دریافت دادههای محصولات:
// pages/api/products.js
import { getProducts } from '../../lib/products'
export default async function handler(req, res) {
if (req.method === 'GET') {
const products = await getProducts()
res.status(200).json(products)
} else {
res.setHeader('Allow', ['GET'])
res.status(405).end(`Method ${req.method} Not Allowed`)
}
}
در این مثال:
با استفاده از یک تابع getProducts که در فایل lib/products.js تعریف شده است، دادههای محصولات از پایگاه داده دریافت میشوند.
اگر درخواست از نوع GET باشد، دادهها به صورت JSON به کلاینت ارسال میشوند.
برای سایر نوع درخواستها، پاسخ خطای متد مجاز نیست ارسال میشود.
استفاده از GraphQL برای مدیریت دادهها
GraphQL یک زبان پرسوجو برای APIها است که به شما امکان میدهد دقیقاً دادههایی را که نیاز دارید دریافت کنید. استفاده از GraphQL میتواند کارایی و انعطافپذیری بیشتری را در مدیریت دادهها فراهم کند.
نصب Apollo Server:
برای استفاده از GraphQL در Next.js، میتوانید از Apollo Server استفاده کنید:
npm install apollo-server-micro graphql
پیکربندی Apollo Server:
یک API Route برای GraphQL ایجاد کنید:
// pages/api/graphql.js
import { ApolloServer, gql } from 'apollo-server-micro'
import { getProducts } from '../../lib/products'
const typeDefs = gql`
type Product {
id: ID!
name: String!
sales: Int!
stock: Int!
}
type Query {
products: [Product]
}
`
const resolvers = {
Query: {
products: async () => await getProducts(),
},
}
const apolloServer = new ApolloServer({ typeDefs, resolvers })
export const config = {
api: {
bodyParser: false,
},
}
export default apolloServer.createHandler({ path: '/api/graphql' })
استفاده از Apollo Client در Frontend:
برای تعامل با سرور GraphQL، میتوانید از Apollo Client استفاده کنید:
npm install @apollo/client graphql
سپس آن را در پروژه خود تنظیم کنید:
// lib/apolloClient.js
import { ApolloClient, InMemoryCache } from '@apollo/client'
const client = new ApolloClient({
uri: '/api/graphql',
cache: new InMemoryCache(),
})
export default client
و در کامپوننت داشبورد:
// pages/dashboard.js
import { useQuery, gql } from '@apollo/client'
import client from '../lib/apolloClient'
import DataTable from '../components/DataTable'
const GET_PRODUCTS = gql`
query GetProducts {
products {
id
name
sales
stock
}
}
`
export default function Dashboard() {
const { loading, error, data } = useQuery(GET_PRODUCTS, { client })
if (loading) return <p>در حال بارگذاری...</p>
if (error) return <p>خطا: {error.message}</p>
const columns = [
{ Header: 'نام محصول', accessor: 'name' },
{ Header: 'فروش', accessor: 'sales' },
{ Header: 'موجودی', accessor: 'stock' },
]
return (
<div>
<h1>داشبورد مدیریتی</h1>
<DataTable columns={columns} data={data.products} />
{/* سایر اجزای داشبورد */}
</div>
)
}
با استفاده از GraphQL و Apollo Client، شما میتوانید به طور دقیق دادههایی را که نیاز دارید دریافت کنید و مدیریت بهتری بر دادههای داشبورد خود داشته باشید.
ایجاد یک داشبورد مدیریتی با Next.js یکی از پروژههای عملی با Next.js است که به توسعهدهندگان امکان میدهد تا مهارتهای خود را در زمینه احراز هویت، مدیریت دادهها و نمایش بصری اطلاعات تقویت کنند. با استفاده از ابزارهایی مانند NextAuth.js برای احراز هویت، Chart.js و React Table برای نمایش دادهها و API Routes یا GraphQL برای مدیریت دادهها، میتوانید داشبوردهای قدرتمند و کارآمدی ایجاد کنید که به کسبوکارها و تیمهای مدیریتی کمک میکنند تا تصمیمات بهتری بگیرند و عملکرد خود را بهبود بخشند.
نتیجهگیری
در این مقاله، به بررسی جامع و کامل پروژههای عملی با Next.js پرداختیم و نشان دادیم که چگونه میتوان با استفاده از این فریمورک قدرتمند، وبسایتهای واکنشگرا، فروشگاههای آنلاین، بلاگها و داشبوردهای مدیریتی را از سطح مبتدی تا پیشرفته پیادهسازی کرد. از طریق مثالهای عملی و کدهای نمونه، شما با فرآیند اتصال به CMSها، مدیریت محتوای دینامیک و استاتیک، ادغام با APIهای مختلف مانند Shopify، و استفاده از ابزارهای نمایش دادهها آشنا شدید.
اجرای پروژههای عملی با Next.js نه تنها به شما کمک میکند تا مهارتهای فنی خود را تقویت کنید، بلکه به شما این امکان را میدهد تا درک عمیقتری از نحوه عملکرد وبسایتهای مدرن و بهینه داشته باشید. با بهرهگیری از ابزارها و تکنیکهای معرفی شده در این مقاله، میتوانید پروژههای پیچیدهتری را با اطمینان و کارایی بیشتری پیادهسازی کنید.
