Next.js 15 Fullstack (App Router + Server Actions) · レッスン

Next.jsアプリのスタイリング

App RouterでグローバルCSS、CSS Modules、Tailwind CSSを使い、Next.js 15アプリケーションにスタイルを追加します。

レッスン 4/413 ステップ

「Next.jsアプリのスタイリング」はCoddyKit上の無料Next.js 15 Fullstack (App Router + Server Actions)レッスンです。これはレッスン4/4です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これは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.

無料で開始

AI チューターと学ぶ TypeScript — 無料

ブラウザでリアルコードを書いて実行し、24/7 の AI チューターから瞬時にサポートを受け、ウェブまたはアプリで続きから学習できます。

コース: 22
レッスン: 88

無料で学習を始めるコース全体を表示

よくある質問

「Next.jsアプリのスタイリング」レッスンは無料ですか？

はい。「Next.jsアプリのスタイリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Next.js 15 Fullstack (App Router + Server Actions)コースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Next.js 15 Fullstack (App Router + Server Actions)コースには全4レッスンが含まれています。

「Next.jsアプリのスタイリング」で何を学びますか？

App RouterでグローバルCSS、CSS Modules、Tailwind CSSを使い、Next.js 15アプリケーションにスタイルを追加します。ブラウザで直接実行するハンズオンコードでNext.js 15 Fullstack (App Router + Server Actions)を演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Next.js 15 Fullstack (App Router + Server Actions)を始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのNext.js 15 Fullstack (App Router + Server Actions)は初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン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)に戻る