Лекция 137: Подключение CSS и стилизация страниц в Next.js

Подключение CSS в Next.js

Глобальные стили

Пришло время привести наши страницы в порядок и научиться подключать стили в Next.js. Next.js предоставляет множество подходов для стилизации страниц, включая традиционные CSS-файлы, CSS Modules и даже библиотеку styled-components для применения CSS-in-JS. Ведь что может быть лучше, чем красивая страница, которая не только работает, но и радует глаз?

Первый и самый простой способ подключить стили в Next.js — это использование глобальных CSS-файлов.

Шаги:

1. Создайте файл global.css в папке styles.

2. В этом файле пропишите свои глобальные стили:

   /* styles/global.css */
   
   body {
       margin: 0;
       padding: 0;
       font-family: Arial, sans-serif;
       background-color: #f0f0f0;
   }
   
   h1 {
       color: #333;
   }

3. Импортируйте файл global.css в файл _app.tsx:

   // pages/_app.tsx
   import '../styles/global.css';
   import type { AppProps } from 'next/app';
   
   function MyApp({ Component, pageProps }: AppProps) {
       return <Component {...pageProps} />;
   }
   
   export default MyApp;

Теперь все ваши глобальные стили будут применяться ко всем страницам вашего приложения.

Ограничение

Хотя глобальные стили удобны, они не позволяют изолировать стили для отдельных компонентов, что может привести к конфликтам.

CSS Modules — изоляция стилей

Если хаос глобальных стилей вас пугает, Next.js поддерживает CSS Modules, которые позволяют локализовать стили для отдельных компонентов.

Шаги:

1. Создайте CSS-файл с именем компонента и добавьте суффикс .module.css:

   /* styles/Button.module.css */
   
   .btn {
       padding: 10px 20px;
       background-color: #0070f3;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
   }
   
   .btn:hover {
       background-color: #005bb5;
   }

2. Подключите стили в компоненте:

   // components/Button.tsx
   import styles from '../styles/Button.module.css';
   
   type ButtonProps = {
       label: string;
       onClick: () => void;
   };
   
   const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
       return (
           <button className={styles.btn} onClick={onClick}>
               {label}
           </button>
       );
   };
   
   export default Button;

Когда вы подключаете CSS-модуль, классы автоматически получают уникальные имена, предотвращая их пересечение с другими стилями.

Использование TypeScript с CSS Modules

Работа с CSS Modules требует дополнительной настройки TypeScript, чтобы избежать ошибок компиляции.

Шаги:

1. Создайте файл next-env.d.ts (если его еще нет) в корне проекта.
2. Добавьте следующую строку:

   /// <reference types="next/types/global" />
   

3. Создайте файл global.d.ts и опишите типы для модулей:

   // global.d.ts
   declare module '*.module.css' {
       const classes: { [key: string]: string };
       export default classes;
   }
   
   declare module '*.module.scss' {
       const classes: { [key: string]: string };
       export default classes;
   }

Styled-Components — CSS-in-JS магия

Для тех, кто считает, что CSS — это "слабость", есть подход с использованием JavaScript для стилизации. Один из самых популярных методов — styled-components.

Установка:

npm install styled-components @types/styled-components

Шаги:

1. Настройте серверный рендеринг styled-components: Создайте файл _document.tsx:

   // pages/_document.tsx
   import Document, { Html, Head, Main, NextScript } from 'next/document';
   import { ServerStyleSheet } from 'styled-components';
   
   export default class MyDocument extends Document {
       static async getInitialProps(ctx: any) {
           const sheet = new ServerStyleSheet();
           const originalRenderPage = ctx.renderPage;
   
           try {
               ctx.renderPage = () =>
                   originalRenderPage({
                       enhanceApp: (App: any) => (props: any) =>
                           sheet.collectStyles(<App {...props} />),
                   });
   
               const initialProps = await Document.getInitialProps(ctx);
               return {
                   ...initialProps,
                   styles: (
                       <>
                           {initialProps.styles}
                           {sheet.getStyleElement()}
                       </>
                   ),
               };
           } finally {
               sheet.seal();
           }
       }
   
       render() {
           return (
               <Html>
                   <Head />
                   <body>
                       <Main />
                       <NextScript />
                   </body>
               </Html>
           );
       }
   }

2. Используйте styled-components:

   import styled from 'styled-components';
   
   const Button = styled.button`
       padding: 10px 20px;
       background-color: #0070f3;
       color: white;
       border: none;
       border-radius: 4px;
       cursor: pointer;
   
       &:hover {
           background-color: #005bb5;
       }
   `;
   
   const App = () => {
       return <Button>Click me</Button>;
   };
   
   export default App;

Styled-components идеально подходит для создания изолированных и динамических стилей на основе пропсов.

Использование Sass в Next.js (для фанатов грандиозного дизайна)

Если одного CSS вам недостаточно, используйте Sass для расширенных возможностей.

1. Установите зависимости:

   npm install sass
   

2. Создайте файл с расширением .module.scss:

   /* styles/Container.module.scss */
   $primary-color: #0070f3;
   
   .container {
       padding: 20px;
       background-color: $primary-color;
       color: white;
       border-radius: 8px;
   }

3. Используйте Sass-файл в компоненте:

   import styles from '../styles/Container.module.scss';
   
   const Container: React.FC = ({ children }) => {
       return <div className={styles.container}>{children}</div>;
   };
   
   export default Container;

Теперь разработка с Sass станет не только стильной, но и удобной!

2

Задача

Модуль 3: React, 14 уровень, 6 лекция

Недоступна

Глобальные стили в Next.js

Глобальные стили в Next.js

Открыть