Summary  
This chapter covers how to import and apply a global CSS file in the root layout component to enforce consistent styles across an entire application.

General domain of usage  
Front-end web development (UI styling)

グローバルCSSファイルには、レイアウト、タイポグラフィ、アプリケーション全体で一貫したデザインパターンなどの要素が含まれることが一般的です。

`app/ui`フォルダに移動すると、`global.css`というファイルが見つかります。このファイルを使用すると、アプリ内のすべてのルートにCSSルールを適用できます。`global.css`はどのコンポーネントにも含めることができますが、アプリのメインコンポーネントであるルートレイアウト（`app/layout.tsx`）に含めることが推奨されます。

グローバルスタイルをアプリに追加します。`app/layout.tsx`に移動し、`global.css`ファイルをインポートしてください。

グローバルスタイルを組み込んだ後、ローカル開発サーバーが起動したままであれば、次のビューが表示されます：<a href="http://localhost:3000/" target="_blank" style="color: #ff8a00; font-weight: 600; text-decoration: none; transition: .3s ease-in-out" onmouseover="this.style.color='#ff0000'" onmouseout="this.style.color='#d27204'" >http://localhost:3000/</a>

Next.jsを使用して、モダンで高性能なウェブアプリケーションの構築方法を学びます。構造化されたレイアウト、スタイリング、ルーティングによるシームレスなナビゲーションでプロジェクトをセットアップします。効率的なデータ取得と表示を行い、レンダリングとパフォーマンスを最適化します。ページネーション、CRUD操作、グローバル検索などの高度な機能を実装し、動的なウェブアプリを実現します。Next.jsプロジェクトのデプロイ、データベースとの接続、認証機能の追加によるユーザーデータの保護も扱います。

Next.jsフレームワークに取り組む前に学ぶべき内容、このコースで期待できること、そして構築するものについて説明します。

プロジェクトのセットアップを行い、アプリにスタイリングを追加する方法を確認し、画像、フォント、ページ、レイアウトなどのビジュアル面を扱います。

アプリの新しいビューを簡単に作成・管理し、組み込まれたルーティングシステムによってすべてのページをシームレスにナビゲートする方法を学びます。

GitHubおよびVercelアカウントを使用してNext.jsアプリをデプロイします。さらに、アプリに必要なデータを提供するためのデータベースを構築します。

データを明確かつ効率的に取得し、ユーザーに表示する方法を検討します。

ページネーション、CRUD操作、グローバル検索、フォームバリデーションなどの最新ウェブ機能の実装方法を学びます。

グローバルCSSファイルの追加

実践例