Next.js Uygulamanızı Biçimlendirme
App Router içinde global CSS, CSS Modules ve Tailwind CSS kullanarak bir Next.js 15 uygulamasına biçemler ekleyin.
Next.js Uygulamanızı Biçimlendirme, CoddyKit'te ücretsiz bir Next.js 15 Fullstack (App Router + Server Actions) dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Next.js 15 Fullstack (App Router + Server Actions) öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.
Styling Options Overview
Next.js supports several styling approaches out of the box: global CSS, scoped CSS Modules, utility-first Tailwind, and CSS-in-JS libraries.
Global Stylesheet
Global CSS is imported once in the root layout and applies to every page — ideal for resets and base typography.
import "./globals.css";
export default function RootLayout({ children }) {
return (<html lang="en"><body>{children}</body></html>);
}CSS Modules for Scope
A CSS Module (x.module.css) generates locally-scoped class names, so component styles never leak into each other.
import styles from "./button.module.css";
export default function Button() {
return <button className={styles.primary}>Click</button>;
}Inside the Module File
Inside a module you write class names normally — Next.js hashes them at build time to keep them unique.
.primary {
background: rebeccapurple;
color: white;
padding: 8px 16px;
}Tailwind CSS
Tailwind gives you utility classes you compose right in your markup. It's the most common styling choice in modern Next.js apps.
export default function Card() {
return <div className="rounded-lg bg-white p-4 shadow">Hello</div>;
}Setting Up Tailwind
To set up Tailwind, install it and add its three directives to your global stylesheet so the utility classes become available.
@tailwind base;
@tailwind components;
@tailwind utilities;Conditional Classes
Toggle classes by state for conditional styling. A helper like clsx keeps the logic clean and readable.
import clsx from "clsx";
<button className={clsx("btn", isActive && "btn-active")} />Fonts with next/font
The next/font module self-hosts fonts with zero layout shift and no extra request to a font provider — performant typography for free.
import { Inter } from "next/font/google";
const inter = Inter({ subsets: ["latin"] });Server vs Client Styling
Global CSS and CSS Modules work in Server Components. Some CSS-in-JS libraries need a Client Component boundary or special setup.
Responsive Design
Tailwind's responsive prefixes like md: and lg: apply styles at breakpoints, making mobile-first layouts effortless.
<div className="text-sm md:text-base lg:text-lg">Responsive text</div>Choosing an Approach
Pick by job: CSS Modules for component isolation, Tailwind for fast utility-driven UI, and global CSS for resets and base typography.
Quick Check
What does a CSS Module give you that a global stylesheet does not?
Recap
Recap: Next.js styling spans global CSS, scoped CSS Modules, and Tailwind utilities, plus next/font for fast type and responsive breakpoints.
Yapay zeka eğitmeniyle TypeScript öğren — ücretsiz
Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.
- Kurslar
- 22
- Dersler
- 88
Sıkça Sorulan Sorular
“Next.js Uygulamanızı Biçimlendirme” dersi ücretsiz mi?
Evet — “Next.js Uygulamanızı Biçimlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Next.js 15 Fullstack (App Router + Server Actions) kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Next.js 15 Fullstack (App Router + Server Actions) kursu toplamda 4 dersten oluşur.
“Next.js Uygulamanızı Biçimlendirme” dersinde ne öğreneceğim?
App Router içinde global CSS, CSS Modules ve Tailwind CSS kullanarak bir Next.js 15 uygulamasına biçemler ekleyin. Next.js 15 Fullstack (App Router + Server Actions) ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Next.js 15 Fullstack (App Router + Server Actions) öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Next.js 15 Fullstack (App Router + Server Actions), başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“Next.js Uygulamanızı Biçimlendirme” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Next.js 15 Fullstack (App Router + Server Actions) dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Next.js 15 Fullstack (App Router + Server Actions) dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Proje Kurulumu ve CLI
- Dosya Sistemi Yönlendirmesinin Temelleri
- Sayfalar ve Düzenlere Genel Bakış
- Next.js Uygulamanızı Biçimlendirme