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, очікувань від курсу та проєктів, які будуть створені.

Ми налаштуємо проєкт, розглянемо способи додавання стилів до нашого застосунку та охопимо візуальні аспекти, такі як зображення, шрифти, сторінки й макети.

Дізнайтеся, як легко створювати та керувати новим поданням для вашого застосунку й здійснювати навігацію між усіма сторінками за допомогою вбудованої системи маршрутизації.

Розгортання додатка Next.js за допомогою облікових записів GitHub і Vercel. Додатково — налаштування бази даних для забезпечення додатка необхідними даними.

Розгляд способів отримання та чіткого й ефективного відображення даних для користувача.

Дізнайтеся, як впроваджувати сучасні веб-функції, такі як пагінація, CRUD-операції, глобальний пошук, валідація форм та інше.

Реалізація автентифікації у Next.js.

Додавання Глобального CSS-Файлу

На практиці