Style CSS trong Next.js

Next.js cung cấp nhiều cách để thêm style CSS trong ứng dụng của bạn bao gồm cả thêm style từ class hay CSS in JS

Trong hướng dẫn này, bạn sẽ khám phá một số cách để thêm Style trong ứng dụng Next.js của mình.

Sử dụng global CSS trong Next.js

Cách dễ nhất để viết CSS trong ứng dụng Next.js là thông qua global CSS của nó. Mỗi dự án Next.js mới được tạo đều đi kèm với một styles/global.css .

Do đó, bạn có thể bắt đầu viết CSS ngay lập tức mà không cần thiết lập gì cả, ví dụ như

.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
    font-size: 16px;
    color: red;
}

File global.css sẽ được áp dụng cho toàn bộ ứng dụng của bạn khi bạn import vào trong file _app.js

import '../styles/globals.css'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp

Giờ bạn chỉ cần thêm className="paragraph" vào trong ứng dụng của mình là xong, ví dụ như ở home component

export default function Home() {
    return (
      <p className="paragraph">I am styled with a global css stylesheet</p>
    )
  }

Ưu điểm của phương pháp này là :

• Không cần thiết lập gì
• Phù hợp với các dự án nhỏ

Nhược điểm:

• Tất cả các style phải dùng chung file, sẽ khá nặng nề khi vào dự án lớn
• Khó có thể mở rộng quy mô khi càng ngày càng lớn

Sử dụng CSS modules với Next.js

Next.js còn có hỗ trợ thêm style theo từng component gọi là CSS modules, nó là một file đặt biệt với đuôi .module.css giúp bạn chia CSS để quản lý dễ dàng. Ví dụ trong component Home, bạn tạo một file Home.module.css

//Home.module.css
.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
    font-size: 16px;
    color: red;
}

Sau đó import vào component của mình

import styles from '../styles/Home.module.css'
export default function Home() {
   return (
     <p className={styles.paragraph}>I am styled with CSS modules</p>
   )
 }

Ưu điểm:

• Cũng không cần setup
• Phân chia CSS theo từng component
• Có thể sử dụng chung với global.css
• Hạn chế sự conflict giữa các class

Nhược điểm:

• Style không có dynamic

Sử dụng Next.js với Sass

Nếu CSS không hài lòng với bạn, có thể sử dụng framework CSS là Sass - CSS with superpowers.

Để cài đặt Sass, dùng lệnh

   npm install sass
    # or
    yarn add sass

Để bắt đầu với scss, bạn tạo file Home.module.scss 

//Home.module.scss
$hover-color: red;

.paragraph {
    font-size: 16px;
    text-align: center;
    color: blue;
}

.paragraph:hover {
   font-size: 18px;
   color: $hover-color;
}

Tương tự như Home.module.css, ta hãy import vào component

import styles from '../styles/Home.module.scss'
export default function Home() {
  return (
    <p className={styles.paragraph}>I am styled with SASS</p>
  )
}

Ưu điểm:

• Dễ dàng cài đặt
• CSS tương thích mọi thiết bị
• Các tính năng thú vị của Sass

Nhược điểm:

• Phải dành thừoi gian học Scss

Sử dụng Styled-JSX trong Next.js

Next.js - cho phép cho các nhà lập trình viên viết Styled-JSX, viết CSS vào trong JavaScript của họ Styled-JSX mà không cần thiết lập bất cứ gì. Ví dụ:

export default function Home() {
    return (
      <div className="paragraph">
        <style jsx>{`
            .paragraph {
                font-size: 16px;
                text-align: center;
                color: blue;
            }

            .paragraph:hover {
                color: red;
            }
        `}</style>
        <p>I am a component styled with Styled-JSX</p>
      </div>
    )
  }

Ưu điểm:

• Không cần thiết lập
• Có thể viết Dynamic style
• Chứa cùng một file nên linh động khi di chuyển

Nhược điểm:

• Để chung nên dễ nhầm lẫn nếu không quen
• Ít người dùng phương pháp này nên ít có hỗ trợ hơn
• Khó debug hơn

Sử dụng styled-components trong next.js

Styled-components rất hữu dụng bởi nó được xây dựng dành riêng cho React. Nó cho phép lập trình viên tạo các component và ịnected style vào trong nó.

Styled-components sử dụng props để làm dynamic styling, để dùng bạn cần cài đặt như sau

    npm i styled-components
    # or
    yarn add styled-components

Sau đó import và sử dụng như ví dụ này

import styled from 'styled-components'

const Paragraph = styled.p`
    font-size: 16px;
    text-align: center;
    color: blue;
    &:hover {
        font-size: 18px;
        color: ${props => props.hoverColor};
    }
`

function HomePage() {
    return (
        <Paragraph hoverColor="red" >Home Pages</Paragraph>
    )
}

Ưu điểm:

• Được xây dựng cho React nên rất nhiều người sử dụng và hỗ trợ
• Dễ dàng thực thiện dynamic styling
• Có thể tuỳ chỉnh và tái sử dụng các component. vd: sử dung <Title /> thay cho <h2 className'title"/>

Nhược điểm

• Không thực hiện kết xuất từ server, chỉ kết xuất ở client
• Cần phải dành thời gian để làm quen với nó
• Khi biên dịch, styled-components sẽ tạo ra class ngẫu nhiên nên sẽ khó debug

Sử dụng Emotion với Next.js

Emotion là một framework CSS dành cho React nên sẵn sàng hỗ trợ cho Next.js. Ngoài ra Emotion còn hỗ trợ kếtw xuất phía Server một cách vượt trội.

Để cài đặt

    npm install --save @emotion/react
    #or
    yarn add @emotion/react

Sau đó import sử dụng dễ dàng như styled-components

const Paragraph = styled.p`
    font-size: 16px;
    text-align: center;
    color: blue;

    &:hover {
        font-size: 18px;
        color: ${props => props.hoverColor};
    }
`

export default function Home() {
  return <Paragraph hoverColor="red">I am a component made with Emotion</Paragraph>
}

Ưu điểm

• Hỗ trợ render phía server trong Next.js
• có tất cả các tính năng của styled-components
• Có nhiều package hỗ trợ khác nhau

Nhược điểm:

• Giống kiểu styled-components, tạo ngẫu nhiên class nên khó debug
• Cần thời gian học sử dung

Sử dụng Tailwind CSS với Next.js

Next.js cũng hỗ trợ cả Tailwind CSS dưới dạng plugin PostCSS, và tạo slyte chính xác cho bạn. Để sử dụng bạn cần cài đặt

 npm install -D tailwindcss postcss autoprefixer

Sau đó generate tailwindcss

npx tailwindcss init -p

Nó sẽ tạo ra 2 files 

• postcss.config.js - bạn không can thiệp vào đây

• tailwind.config.js

Trong file tailwind.config.js

module.exports = {
  mode: "jit",
  purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
};

File globals.css thêm vào Tailwind CSS directives

    @tailwind base;
    @tailwind components;
    @tailwind utilities;

Như vậy, phần setup đã xong, giờ bạn có thể sử dụng nó, ví dụ

export default function Home() {
    return (
      <p class="text-center text-lg hover:text-red-600">
        I am a component made with Tailwind CSS
      </p>
    )
  }

Ưu điểm:

• Rất nhiều class đã tạo sẵn sẽ hỗ trợ cho bạn
• Khi quen thuộc sẽ giúp dự án đẩy nhanh hơn
• CSS không dùng sẽ tự động xoá nên tối ưu hơn

Nhược điểm

• Không tách biệt nội dung và cấu trúc CSS và HTML do nó đã biên dịch sẵn
• Cần thời gian để học