تشغيل Next.js باستخدام TailwindCSS

مقدمة

يوضح هذا البرنامج التعليمي كيفية تثبيت Next.js مع TailwindCSS لإنشاء إعداد أولي لمشاريع الواجهة الأمامية المختلفة.

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 وأضف قسم "script" كما هو موضح هنا:

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

الخطوة 2 – تثبيت TailwindCSS

يستخدم TailwindCSS PostCSS كمعالج أولي وAutoPrefix كاعتماديات إضافية. هذا اختياري ولكنه مُوصى به، إذ يُقدم 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

لتحديد مسارات لتطبيقنا، يُمكننا ببساطة إضافة ملفات JavaScript إضافية إلى مجلد التطبيق. سنركز في هذا البرنامج التعليمي على الصفحات غير المُولّدة ديناميكيًا. وذلك لأنه في كثير من الحالات، من الضروري إنشاء مسارات باستخدام بيانات ديناميكية، على سبيل المثال، إنشاء مسارات بناءً على مُعرّف. يُمكنك العثور على دليل مُفيد حول كيفية تحقيق ذلك في وثائق 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: عبر JavaScript

هذه طريقة ملائمة لإضافة 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.

إنشاء التطبيق/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>
</>
)
}

إنشاء ورقة التطبيق العالمية/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 إمكانية تخصيص القالب الافتراضي بسهولة. بتغيير خاصية القالب في 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 لأول مرة جدلاً واسعًا، وكالعادة، لا توجد قاعدة عامة. يقول البعض إنها مُعقدة ويصعب قراءتها، وأنها لا تختلف عن الأنماط المضمنة، أو أنها تُخالف مبدأ فصل الاهتمامات. شخصيًا، أعتقد أن جميع هذه النقاط قابلة للنقاش، وأوصي بالمقالين التاليين لفهم كلا الجانبين. بهذه الطريقة، ستعرف ما إذا كان هذا الإطار مناسبًا لمشروعك القادم.