Next.js را با TailwindCSS راه اندازی کنید

مقدمه

این آموزش نحوه نصب Next.js را در ترکیب با TailwindCSS برای ایجاد یک راه‌اندازی اولیه برای پروژه‌های مختلف frontend نشان می‌دهد.

Next.js یک فریم ورک فرانت‌اند ReactJS است که ویژگی‌های مفید زیادی را ارائه می‌کند. نه تنها می تواند به عنوان یک تولید کننده سایت ایستا عمل کند، بلکه دارای استراتژی های پیشرفته ای برای واکشی داده ها از منابع مختلف برای نمایش محتوای پویا است.

TailwindCSS یک فریم ورک CSS است که از یک رویکرد کاربردی اول برای اعمال نام کلاس های CSS استفاده می کند. این یک راه کارآمد برای ایجاد طرح‌بندی‌ها و طرح‌های مدرن بدون ایجاد دردسر زیاد در مورد قراردادهای نام‌گذاری است.

پیش نیازها

• سیستم با MacOS، Windows یا Linux
• آخرین نسخه Node.js و npm نصب شده است

مرحله 1 – Next.js را نصب کنید

می توانید Next.js را به صورت خودکار یا دستی نصب کنید.

• بطور خودکار:

npx create-next-app my-project [--use-npm]

• به صورت دستی:

mkdir ~/my-project && cd ~/my-project
npm install next react react-dom

پس از نصب Next.js، فایل جدید ~/my-project/package.json را ویرایش کنید و بخش “اسکریپت” را همانطور که در اینجا نشان داده شده است اضافه کنید:

{
"dependencies": {
<your_dependencies>
},
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
}
}

مرحله 2 – TailwindCSS را نصب کنید

TailwindCSS از PostCSS به عنوان پیش پردازنده و پیشوند خودکار به عنوان وابستگی های اضافی استفاده می کند. این اختیاری است اما توصیه می‌شود، زیرا Tailwind هنگام استفاده از این افزونه‌ها ویژگی‌های خوبی را ارائه می‌دهد، به عنوان مثال. استفاده از کلمات کلیدی غیر استاندارد مانند @apply، @theme یا theme() که می توانند در فایل CSS سفارشی ما استفاده شوند.

cd ~/my-project
npm install -D tailwindcss postcss autoprefixer

پس از آن، ما می توانیم یک فایل پیکربندی برای TailwindCSS ایجاد کنیم:

npx tailwindcss init -p

با این کار tailwind.config.js و postcss.config.js ایجاد می شود.

مرحله 3 – Next.js را پیکربندی کنید

برای تعریف مسیرها برای برنامه ما فقط می توانیم فایل های جاوا اسکریپت اضافی را به فهرست برنامه اضافه کنیم. در این آموزش بر روی صفحاتی تمرکز می کنیم که به صورت پویا تولید نمی شوند. زیرا در بسیاری از موارد لازم است مسیرها توسط داده های پویا تولید شوند، به عنوان مثال ایجاد مسیرها بسته به یک شناسه. می‌توانید یک راهنمای عالی در مورد چگونگی دستیابی به این هدف در مستندات Next.js پیدا کنید (مطمئن شوید که منو روی «استفاده از روتر برنامه» تنظیم شده است).

افزودن صفحات

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

علاوه بر این، می توانید به تعداد دلخواه زیر شاخه ها اضافه کنید. هر زیر شاخه با یک فایل page.tsx، نشان دهنده یک صفحه فرعی برای برنامه شما است.

در این آموزش از مثال زیر استفاده خواهیم کرد:

app/
├── layout.tsx # layout of main page and all subpages
├── page.tsx # content main page
└── example-subpage/
├── layout.tsx # additional layout requirements for example-subpage
└── page.tsx # content example-subpage

این مثال دو صفحه را در اختیار ما قرار می دهد:

http://<ip-address>:3000 # main page
http://<ip-address>:3000/example-subpage # subpage

اگر Next.js را به صورت دستی نصب کرده اید، دایرکتوری فایل های برنامه را ایجاد کنید:

mkdir ~/my-project/app

اکنون می توانید محتوای صفحات خود را اضافه کنید:

• صفحه اصلی

nano ~/my-project/app/page.tsx

از این محتوا برای صفحه اصلی استفاده کنید:

// ~/my-project/app/page.tsx
export default function Page() {
return <h1 className="text-white text-3xl font-bold pl-5">Welcome to Next.js and TailwindCSS</h1>
}

• صفحه فرعی

یک زیر شاخه جدید برای صفحه فرعی اضافه کنید و page.tsx را ایجاد کنید:

mkdir ~/my-project/app/example-subpage
nano ~/my-project/app/example-subpage/page.tsx

از این محتوا برای صفحه فرعی استفاده کنید:

// ~/my-project/app/example-subpage/page.tsx
export default function Page () {
return (
<>
<div className="flex flex-col place-content-center items-center col-span-1 pr-3">
<div className="border-2 rounded-full p-0.5 border-gray-600 mb-2">
<img
className="rounded-full w-100 h-100"
src="https://picsum.photos/100/100"
alt="random image from unsplash"
/>
</div>
</div>
<div className="col-span-5 pr-3">
<h2 className="text-white text-3xl font-semibold pl-4 mb-3">Welcome to Next.js and TailwindCSS</h2>
<span className="text-gray-500 text-lg font-bold block pl-4 mb-3">Bringing both frameworks together</span>
<p className="text-white pl-4 leading-7">
Cats are believed to be the only mammals who don't taste sweetness. Cats are nearsighted, but their peripheral
vision and night vision are much better than that of humans. Cats are supposed to have 18 toes (five toes on
each front paw; four toes on each back paw). Cats can jump up to six times their length.
</p>
</div>
</>
)
}

طرح بندی را اضافه کنید (TailwindCSS)

اکنون که محتوای صفحات خود را داریم، می‌توانیم طرح‌بندی را اضافه کنیم که صفحات باید در آن نمایش داده شوند.

• طرح بندی کلی برای صفحه اصلی و تمام صفحات فرعی

همانطور که قبلا ذکر شد، طرح بندی تعریف شده در app/layout.js به طور خودکار در صفحه اصلی و تمام صفحات فرعی اعمال می شود.

یکی از این دو گزینه را برای گنجاندن TailwindCSS انتخاب کنید:

• جایگزین 1: از طریق جاوا اسکریپت

این یک راه راحت برای اضافه کردن TailwindCSS بدون نیاز به نوشتن هر شیوه نامه دیگری است.

nano ~/my-project/app/layout.tsx

از این مطالب استفاده کنید:

// ~/my-project/app/layout.tsx
import 'tailwindcss/tailwind.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

• جایگزین 2: از طریق CSS

امکان دیگر اضافه کردن استایل های Tailwind توسط CSS است. برای رسیدن به این هدف، صفحه سبک جهانی را در فایل app/layout.tsx وارد می کنیم.

ایجاد app/layout.tsx:

nano ~/my-project/app/layout.tsx

از این مطالب استفاده کنید:

// ~/my-project/app/layout.tsx
import './globals.css'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<>
<html lang="en">
<head>
<title>Next.js and TailwindCSS</title>
<link rel="icon" href="/favicon.ico"/>
</head>
<body className="min-h-screen bg-gradient-to-tr from-midnight-100 via-midnight-200 to-midnight-300 flex flex-col justify-center">{children}</body>
</html>
</>
)
}

app/global.css شیت جهانی را ایجاد کنید:

/* ~/my-project/app/globals.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

متأسفانه Tailwind به جز تزریق سبک های تولید شده (بر اساس پیکربندی Tailwind) به شیوه نامه در زمان ساخت، توضیح عمیقی درباره آنچه دستورالعمل @tailwind انجام می دهد، ارائه نمی دهد.

• طرح بندی سفارشی برای صفحات فرعی

هر صفحه فرعی فایل طرح بندی مخصوص به خود را دارد. هنگامی که نیازهای طرح بندی اضافی دارید، می توانید آنها را مستقیماً در فایل طرح بندی صفحه فرعی ذخیره کنید یا آنها را در یک فهرست اختصاصی ذخیره کنید و آن را در فایل طرح بندی صفحه فرعی وارد کنید. ذخیره مشخصات طرح‌بندی اضافی در یک فهرست اختصاصی، استفاده مجدد از طرح‌بندی را در چندین زیرصفحه مختلف آسان‌تر می‌کند. بنابراین اگر شما به طرح بندی یکسانی برای چندین زیرصفحه مختلف نیاز دارید، منطقی است.

دایرکتوری برای طرح بندی های اضافی ایجاد کنید:

mkdir ~/my-project/components

طرح اضافی را ایجاد کنید:

nano ~/my-project/components/FancyCard.js

این محتوا را اضافه کنید:

// ~/my-project/components/FancyCard.js
'use client'
import React from 'react'
const FancyCard = ({ children }) => {
return (
<div className="max-w-xl mx-auto">
<div className="p-8 bg-midnight-200 shadow-xl rounded-3xl border-4 border-gray-600">
<div className="grid grid-cols-6 gap-0 divide-x divide-gray-600">
{children}
</div>
</div>
</div>
)
}
export default FancyCard

اکنون فایل layout.tsx را برای صفحه فرعی خود ایجاد کنید و مشخصات طرح بندی اضافی را اعمال کنید:

nano ~/my-project/app/example-subpage/layout.tsx

// ~/my-project/app/example-subpage/layout.tsx
import FancyCard from '../../components/FancyCard'
export default function Layout({ children }) {
return <FancyCard>{children}</FancyCard>
}

همانطور که قبلا ذکر شد، می‌توانید در صورت نیاز طرح‌بندی‌های بیشتری را در مؤلفه‌ها اضافه کنید و آنها را همانطور که در بالا نشان داده شده است در فایل layout.tsx هر صفحه فرعی که باید از آن طرح‌بندی خاص استفاده کند، وارد کنید. اگر قصد دارید از یک طرح بندی فقط یک بار استفاده کنید، می توانید آن را مستقیماً در فایل layout.tsx آن صفحه فرعی اضافه کنید.

مرحله 4 – TailwindCSS را پیکربندی کنید

مرحله آخر سفارشی کردن فایل های پیکربندی برای Tailwind و PostCSS است.

با اجرای npx tailwindcss init -p ما قبلا دو فایل پیکربندی ایجاد کرده ایم:

• tailwind.config.js
• postcss.config.js

اگر می‌خواهیم از PostCSS به‌عنوان پیش‌پردازنده استفاده کنیم، می‌توانیم از postcss.config.js برای توابع اضافی مانند افزودن پیشوندهای فروشنده، افزودن تنظیم مجدد CSS سراسری یا ایجاد قوانین @font-face استفاده کنیم.

یکی دیگر از ویژگی های عالی در TailwindCSS این است که می توانید به راحتی تم پیش فرض را سفارشی کنید. با تغییر ویژگی theme در tailwind.config.js، می توانیم سفارشی سازی کنیم، به عنوان مثال. نقاط شکست سفارشی، رنگ‌ها، فونت‌ها یا ویژگی‌های دقیق‌تر، مانند فاصله‌ها، شعاع حاشیه یا سایه‌های جعبه. با تغییر کلید رنگ ها، می توان پالت رنگ سفارشی خود را به تم موجود اضافه کرد:

nano ~/my-project/tailwind.config.js

مطالب زیر را اضافه کنید:

// ~/my-project/tailwind.config.js
const defaultTheme = require('tailwindcss/defaultTheme')
module.exports = {
content: [
'./app/**/*.{js,ts,jsx,tsx,mdx}',
'./components/**/*.{js,ts,jsx,tsx,mdx}',
],
theme: {
colors: {
...defaultTheme.colors,
'white': '#ffffff',
'black': '#242424',
'midnight': {
'100': '#03060a',
'200': '#001a40',
'300': '#060b17',
// add more color variants if you want to
},
'gray': {
'500': '#6b7280',
'600': '#4b5563',
},
'purple': {
'500': '#6d28d9',
},
// add more colors if you want to
},
},
plugins: [],
}

علاوه بر این، ما در حال گسترش طرح رنگی پیش‌فرض هستیم، بنابراین همچنان می‌توانیم از پالت رنگی پیش‌فرض Tailwind استفاده کنیم. توجه داشته باشید که اکنون می‌توانیم با استفاده از رنگ تعریف‌شده و نوع مربوطه، bg-{color}-{variant}، رنگ‌های خود را روی چندین کلاس کاربردی اعمال کنیم. به عنوان مثال.:

<div className="bg-midnight-300">
...
</div>

مرحله 5 – برنامه را شروع کنید

اکنون که همه چیز تنظیم شده است، می توانیم برنامه را برای مشاهده نتیجه خود راه اندازی کنیم:

• برای دسترسی از طریق IP خصوصی (localhost):

npm run dev

• برای دسترسی از طریق IP عمومی:

npm run dev -- -H 0.0.0.0

هر دو صفحه را در یک مرورگر وب باز کنید:

http://<ip-address>:3000http

://<ip-address>:3000/example-subpage

این باید به شکل زیر باشد:

نتیجه

ما با موفقیت یک برنامه Next.js را راه اندازی کردیم که از Tailwind به عنوان یک چارچوب CSS استفاده می کند.

استفاده از فریم ورک‌های CSS اولیۀ کاربردی، اختلاف نظر زیادی ایجاد می‌کند و طبق معمول هیچ حکم جهانی وجود ندارد. برخی می گویند که نامرتب و خواندن آن سخت است، تفاوتی با سبک های درون خطی وجود ندارد یا این که جداسازی نگرانی ها را نقض می کند. من شخصاً فکر می کنم که همه این نکات را می توان در تضاد قرار داد و دو مقاله زیر را برای برداشت از هر دو طرف توصیه می کنم. به این ترتیب شما این احساس را خواهید داشت که آیا این چارچوب مناسب برای پروژه بعدی شما است یا خیر.