[Next.js] Styles JSX
·
Next.js/이론
Next.js에서 .module.css 패턴을 통해서 style을 주는 방식 외에 다른 방법으로도 style을 줄 수 있다. Styles JSX React에서나 다른 언어도 개발을 할 때 한번도 들어보지 못한 방식일 것이다. Styles JSX는 Next.js에서만 제공하는 고유한 방법이기 때문이다. import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { const router = useRouter(); return ( Home About ); }; export default NavBar; style 태그에 jsx 속성을 준 다음 {` `} 에 css를 넣어주면 된다. 이렇게 넣어주면 .mod..
[Next.js] CSS 모듈
·
Next.js/이론
Next.js에서 CSS를 추가하는 방법은 다양하게 있다. 1. style 속성 사용 import Link from "next/link"; import { useRouter } from "next/router"; const NavBar = () => { // ... return ( Home About ); }; export default NavBar; 태그에 존재하는 style 속성을 사용하면 Next.js에서도 똑같이 style을 줄 수 있다. 하지만 이 방법은 재사용에 불편함이 있고, 개인적으로 코드 가독성이 떨어진다고 생각한다. 대신 사용할 수 있는 기능 중 하나가 .module.css 패턴이다. 2. .module.css 패턴 먼저 css 파일을 파일명.module.css로 만들어준다. impor..