ساخت وب‌سایت استاتیک با Next.js

نکست یا Next.js یک فریم‌ورک توسعه وب منبع باز است که توسط Vercel ساخته شده است و به برنامه های وب مبتنی بر React اجازه می دهد تا از رندرینگ سمت سرور استفاده کنند و وب سایت های استاتیک تولید کنند.

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

ما در این پروژه از زبان برنامه‌نویسی TypeScript و پیکج‌منجر PNPM استفاده می‌کنیم. پس برای ساخت پروژه، از دستور زیر استفاده کنید.

npx create-next-app my-static-site --use-pnpm --typescript

این دستور یک اپ Next.js جدید را در یک پوشه به نام my-static-site ایجاد خواهد کرد و به جای پکیج‌منیجر NPM یا Yarn از PNPM استفاده خواهد کرد و وابستگی‌های پروژه را از طریق این پکیج‌منجر نصب می‌کند.

بسته به سرعت اینترنت شما کمی زمان می‌برد تا تمام دیپندنسی‌ها یا وابستگی‌های پروژه نصب شوند. پس از اتمام پروسه ساخت پروژه از طریق ادیتور مورد علاقه خود پوشه my-static-site را باز نمایید.

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

در اینجا فرض بر این است که شما یک صفحه اصلی با نام index.tsx و یک صفحه درباره‌ما با نام about.tsx می‌خواهید ایجاد کنید. برای ایجاد هر کدام از این صفحات، می‌توانید یک فایل JSX جدید با همین نام ایجاد کنید و کد خود را در آن قرار دهید.

به عنوان مثال، برای ایجاد صفحه اصلی، فایل index.tsx را که قبلا ایجاد شده باز نمایید و کد زیر را در آن قرار دهید.

import type { NextPage } from 'next'

const Home: NextPage = () => {
  return (
    <>
      <div>Welcome to my static site!</div>
    </>
  )
}

export default Home

و برای ایجاد صفحه درباره‌ما، فایل about.tsx را ایجاد کنید و کد زیر را در آن قرار دهید.

import type { NextPage } from 'next'

const About: NextPage = () => {
  return (
    <>
      <div>About us page!</div>
    </>
  )
}

export default About

حال باید برای راحتی پروسه بیلد و اکسپورت پروژه به صورت استاتیک کمی تنظیمات اضافه انجام دهیم. یک فایل جدید به نام .npmrc بسازید و کد زیر را در آن قرار دهید.

enable-pre-post-scripts=true

سپس فایل package.json را باز نمایید و قسمت scripts را به شکل زیر به‌روزرسانی کنید.

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "postbuild": "next export",
    "start": "next start",
    "lint": "next lint"
  }
}

حالا که پروژه‌ی خود را ساختید و فایل‌های مورد نیاز را ایجاد کردید، می‌توانید سایت خود را در GitHub Pages بارگزاری و راه‌اندازی کنید. برای این کار، مراحل زیر را دنبال کنید.

ابتدا باید پروژه خود را روی GitHub بارگذاری کنید. برای این کار، از دستورات Git استفاده کنید و پروژه را به ریپوزیتوری خود روی GitHub منتقل کنید.

برای مثال، اگر نام ریپوزیتوری شما my-static-site باشد، دستورات زیر را در ترمینال وارد کنید.

git remote add origin https://github.com/your-username/my-static-site.git
git push -u origin main

سپس باید basePath و assetPrefix را در تنظیمات نکست را به روز کنید. برای این کار، کد زیر را در فایل next.config.js قرار دهید.

module.exports = {
  basePath: '/my-static-site',
  assetPrefix: '/my-static-site/',
}

توجه داشته باشید که my-static-site باید با نام ریپوزیتوری شما جایگزین شود.

حالا باید سایت خود را برای GitHub Pages بیلد و سپس اکسپورت کنید. برای این کار، از دستور زیر استفاده کنید.

pnpm run build

بعد از بیلد کردن سایت، باید پوشه out را درون یک برنچ جدید به نام gh-pages قرار دهید. برای این کار، از دستورات زیر استفاده کنید.

git checkout -b gh-pages
git add out && git commit -m "Initial commit"
git subtree push --prefix out origin gh-pages

با اجرای این دستورات، سایت شما روی GitHub Pages راه‌اندازی شده است. برای مشاهده‌ی سایت، به آدرس زیر مراجعه کنید (توجه داشته باشید که my-static-site باید با نام ریپوزیتوری شماست.

 https://your-username.github.io/my-static-site/