Next.js'yi TailwindCSS ile başlatın

giriiş

Bu eğitimde, çeşitli ön uç projeleri için ilk kurulumu oluşturmak üzere Next.js'nin TailwindCSS ile birlikte nasıl kurulacağı gösterilmektedir.

Next.js, birçok kullanışlı özellik sunan bir ReactJS ön uç çerçevesidir. Statik site oluşturucu olarak işlev görmesinin yanı sıra, dinamik içerik görüntülemek için çeşitli kaynaklardan veri çekmek için gelişmiş stratejilere de sahiptir.

TailwindCSS, CSS sınıf adlarını uygulamada işlevsellik odaklı bir yaklaşım kullanan bir CSS çerçevesidir. Adlandırma kurallarıyla uğraşmadan modern düzenler ve tasarımlar oluşturmanın verimli bir yoludur.

Ön koşullar

• MacOS, Windows veya Linux sistem
• Node.js ve npm'in son sürümü yüklü.

Adım 1 – Next.js'yi yükleyin

Next.js’yi otomatik veya manuel olarak kurabilirsiniz.

• Otomatik olarak:

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

• Manuel olarak:

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

Next.js'yi yükledikten sonra, yeni ~/my-project/package.json dosyasını düzenleyin ve burada gösterildiği gibi "script" bölümünü ekleyin:

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

Adım 2 – TailwindCSS'yi yükleyin

TailwindCSS, ön işlemci olarak PostCSS'yi ve ek bağımlılıklar olarak AutoPrefix'i kullanır. Bu isteğe bağlıdır ancak Tailwind, bu eklentileri kullanırken bazı güzel özellikler sunduğu için önerilir; örneğin, özel CSS dosyamızda kullanılabilen @apply, @theme veya theme() gibi standart dışı anahtar sözcüklerin kullanımı.

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

Daha sonra TailwindCSS için bir yapılandırma dosyası oluşturabiliriz:

npx tailwindcss init -p

Bu, tailwind.config.js ve postcss.config.js dosyalarını oluşturacaktır.

Adım 3 – Next.js'yi yapılandırın

Uygulamamız için rotaları tanımlamak üzere uygulama dizinine ek JavaScript dosyaları ekleyebiliriz. Bu eğitimde, dinamik olarak oluşturulmayan sayfalara odaklanacağız. Bunun nedeni, çoğu durumda, örneğin bir ID'ye dayalı rotalar oluştururken, dinamik veriler kullanarak rotalar oluşturmanın gerekli olmasıdır. Next.js belgelerinde bunu nasıl başaracağınıza dair harika bir rehber bulabilirsiniz (menünün "Uygulama Yönlendiricisini Kullan" olarak ayarlandığından emin olun).

Sayfa ekle

Sayfa oluşturmak için app adlı bir alt dizine ihtiyacınız var. Uygulamanın içinde iki dosyaya ihtiyacınız var:

Ayrıca, istediğiniz kadar alt dizin ekleyebilirsiniz. Her alt dizin, page.tsx dosyasıyla birlikte, uygulamanız için bir alt sayfayı temsil eder.

Bu eğitimde aşağıdaki örneği kullanacağız:

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

Bu örnek bize iki sayfa veriyor:

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

Next.js'yi manuel olarak yüklediyseniz, uygulama dosyaları dizinini oluşturun:

mkdir ~/my-project/app

Artık sayfalarınıza içerik ekleyebilirsiniz:

• Ana sayfa

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

Bu içeriği ana sayfanız için kullanın:

// ~/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>
}

• Alt sayfa

Alt sayfa için yeni bir alt dizin ekleyin ve page.tsx dosyasını oluşturun:

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

Bu içeriği alt sayfa için kullanın:

// ~/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>
</>
)
}

Düzen ekle (TailwindCSS)

Artık sayfalarımızın içerikleri hazır olduğuna göre, sayfaların nasıl görüntüleneceği düzenini ekleyebiliriz.

• Ana sayfa ve tüm alt sayfaların genel düzeni

Daha önce de belirttiğimiz gibi app/layout.js dosyasında tanımlanan düzen otomatik olarak ana sayfaya ve tüm alt sayfalara uygulanır.

TailwindCSS'yi dahil etmek için şu iki seçenekten birini seçin:

• Alternatif 1: JavaScript aracılığıyla

Bu, herhangi bir ek stil sayfası yazmadan TailwindCSS eklemenin kullanışlı bir yoludur.

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

Bu içeriği kullanın:

// ~/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>
</>
)
}

• Alternatif 2: CSS aracılığıyla

Diğer bir seçenek de Tailwind stillerini CSS kullanarak eklemektir. Bunu başarmak için genel stil sayfasını app/layout.tsx dosyasına aktarıyoruz.

app/layout.tsx dosyasını oluşturun:

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

Bu içeriği kullanın:

// ~/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>
</>
)
}

Küresel sayfa app/global.css'yi oluşturun:

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

Ne yazık ki Tailwind, @tailwind yönergesinin derleme zamanında stil sayfasına üretilen stilleri (Tailwind'in yapılandırmasına göre) enjekte etmek dışında ne yaptığına dair derinlemesine bir açıklama sunmuyor.

• Alt sayfalar için özel düzen

Her alt sayfanın kendi düzen dosyası vardır. Ek düzen ihtiyaçlarınız olduğunda, bunları doğrudan alt sayfa düzen dosyasına kaydedebilir veya özel bir dizine kaydedip alt sayfa düzen dosyasına aktarabilirsiniz. Ek düzen özelliklerini özel bir dizine kaydetmek, düzeni birden fazla alt sayfada yeniden kullanmayı kolaylaştırır. Bu nedenle, birden fazla alt sayfa için aynı düzene ihtiyacınız varsa mantıklıdır.

Ek düzenler için bir dizin oluşturun:

mkdir ~/my-project/components

Ek düzen oluştur:

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

Bu içeriği ekle:

// ~/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

Şimdi alt sayfanız için layout.tsx dosyasını oluşturun ve ek düzen özelliklerini uygulayın:

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>
}

Daha önce de belirtildiği gibi, ihtiyaç duyduğunuzda bileşenlere daha fazla düzen ekleyebilir ve bunları, yukarıda gösterildiği gibi, söz konusu düzeni kullanması gereken her alt sayfanın layout.tsx dosyasına ekleyebilirsiniz. Bir düzeni yalnızca bir kez kullanmayı planlıyorsanız, doğrudan o alt sayfanın layout.tsx dosyasına ekleyebilirsiniz.

Adım 4 – TailwindCSS'yi yapılandırın

Son adım Tailwind ve PostCSS için yapılandırma dosyalarını özelleştirmektir.

npx tailwindcss init -p komutunu çalıştırarak iki adet yapılandırma dosyası oluşturduk:

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

PostCSS'i ön işlemci olarak kullanmak istiyorsak, satıcı önekleri eklemek, genel CSS sıfırlamaları eklemek veya @font-face kuralları oluşturmak gibi ek işlevler için postcss.config.js'yi kullanabiliriz.

TailwindCSS'in bir diğer harika özelliği de varsayılan temayı kolayca özelleştirebilmenizdir. tailwind.config.js dosyasındaki tema özelliğini değiştirerek, örneğin özel kesme noktaları, renkler, yazı tipleri veya aralık, kenarlık yarıçapı ya da kutu gölgeleri gibi daha ayrıntılı özellikler gibi özelleştirmeler yapabiliriz. Renk anahtarını değiştirerek, mevcut temaya kendi özel renk paletimizi ekleyebiliriz:

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

Aşağıdaki içeriği ekleyin:

// ~/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: [],
}

Ayrıca, varsayılan renk şemasını genişletiyoruz, böylece Tailwind'in varsayılan renk paletini kullanmaya devam edebiliyoruz. Artık, tanımlanan rengi ve karşılık gelen değişkeni bg-{color}-{variant} kullanarak kendi renklerimizi birden fazla uygulama sınıfına uygulayabileceğimizi unutmayın. Örneğin:

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

Adım 5 – Uygulamayı başlatın

Artık her şey ayarlandığına göre, sonucu görmek için programı çalıştırabiliriz:

• Özel IP (localhost) üzerinden erişim için:

npm run dev

• Genel IP üzerinden erişim için:

npm run dev -- -H 0.0.0.0

Her iki sayfayı da bir web tarayıcısında açın:

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

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

Bu şu şekilde görünmelidir:

Sonuç

CSS framework olarak Tailwind kullanan Next.js uygulamasını başarıyla başlattık.

CSS çerçevelerinin ilk kez kullanılması büyük tartışmalara yol açıyor ve her zamanki gibi evrensel bir kural yok. Bazıları karmaşık ve okunması zor olduğunu, satır içi stillerden farklı olmadığını veya endişelerin ayrıştırılmasını ihlal ettiğini söylüyor. Şahsen, tüm bu noktalara karşı çıkılabileceğini düşünüyorum ve her iki tarafın da fikrini edinmek için aşağıdaki iki makaleyi tavsiye ediyorum. Böylece, bu çerçevenin bir sonraki projeniz için uygun olup olmadığına dair bir fikir edinebilirsiniz.