Next.js 15 Fullstack (App Router + Server Actions) · บทเรียน

การกำหนดรูปแบบให้แอป Next.js

เพิ่มรูปแบบให้แอปพลิเคชัน Next.js 15 ด้วย CSS แบบทั่วทั้งแอป CSS Modules และ Tailwind CSS ภายในตัวจัดเส้นทางแอป

บทเรียน 4 จาก 413 ขั้นตอน

การกำหนดรูปแบบให้แอป Next.js เป็นบทเรียน Next.js 15 Fullstack (App Router + Server Actions) ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Next.js 15 Fullstack (App Router + Server Actions) และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

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.

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 22
บทเรียน: 88

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “การกำหนดรูปแบบให้แอป Next.js” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “การกำหนดรูปแบบให้แอป Next.js” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Next.js 15 Fullstack (App Router + Server Actions) ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Next.js 15 Fullstack (App Router + Server Actions) มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดรูปแบบให้แอป Next.js”

เพิ่มรูปแบบให้แอปพลิเคชัน Next.js 15 ด้วย CSS แบบทั่วทั้งแอป CSS Modules และ Tailwind CSS ภายในตัวจัดเส้นทางแอป คุณปฏิบัติ Next.js 15 Fullstack (App Router + Server Actions) ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Next.js 15 Fullstack (App Router + Server Actions) หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Next.js 15 Fullstack (App Router + Server Actions) บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “การกำหนดรูปแบบให้แอป Next.js” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Next.js 15 Fullstack (App Router + Server Actions) นี้ได้ไหม

ได้ บทเรียน Next.js 15 Fullstack (App Router + Server Actions) ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Next.js 15 Fullstack (App Router + Server Actions)