close

Keɓance Salo da UI a cikin Next.js: Binciken CSS Module, Styled

A cikin wannan sashe, za mu bincika yadda ake keɓance salo da mai amfani da Next.js aikace-aikacen ku ta amfani da dabaru kamar CSS module, styled-components, da sauran ɗakunan karatu na UI. Za mu ƙirƙiri abin ban sha'awa na gani da ma'amala don aikace-aikacen mu.

Amfani da CSS Module

CSS Module wata dabara ce da ke ba ka damar ƙirƙirar azuzuwan CSS masu zaman kansu da na gida don keɓance kamannin abubuwan haɗin kai. Ga misalin amfani da CSS Module a cikin Next.js:

Ƙirƙiri fayil na CSS tare da suna a cikin tsari {componentName}.module.css.

Yi amfani da azuzuwan CSS da aka ƙirƙira a cikin fayil ɗin ƙirar CSS ɗinku a cikin abubuwan da kuka haɗa React:

import styles from './Button.module.css';  
  
function Button() {  
  return <button className={styles.button}>Click me</button>;  
}

Amfani Styled Components

Styled Components yana ba ka damar rubuta CSS kai tsaye a cikin abubuwan da aka gyara na React ta amfani da syntax JavaScript. Ga misalin amfani Styled Components a cikin Next.js:

Shigar styled-components:

npm install styled-components

Yi amfani styled-components da salon abubuwan da aka haɗa ku:

import styled from 'styled-components';  
  
const Button = styled.button`  
  background-color: #007bff;  
  color: #ffffff;  
  padding: 10px 20px;  
  border: none;  
  border-radius: 5px;  
`;

Amfani da Sauran Laburaren UI

Baya ga CSS module da styled-components, Hakanan zaka iya amfani da dakunan karatu na UI kamar su Material-UI, Ant Design, ko Chakra UI don keɓance mahaɗin aikace-aikacenku cikin sauri da ƙwarewa.

Kammalawa

Wannan sashe ya gabatar da ku don keɓance salo da ƙirar mai amfani da Next.js aikace-aikacenku ta amfani da dabaru kamar CSS module, styled-components, da sauran ɗakunan karatu na UI. Ta hanyar yin amfani da waɗannan fasahohin, za ku iya ƙirƙirar ƙa'idar mu'amala mai ban sha'awa don aikace-aikacenku.