어리둥절 분석가 그리고 개발자

✔️ React 기존에 react를 쓸 때에는 react-router-dom의 Link를 사용하고 Link에 직접적으로 className을 줄 수 있었다 import { Link } from "react-router-dom"; ✔️ Next Next에서는 우선 next/link에서 제공하는 Link를 사용해야 하고 to 대신에 href를 사용해야 한다. 또 직접적으로 className을 줄 수 없어 Link 밑에 하나 tag를 더 넣고 a 태그에 className으로 스타일링을 했다. import Link from "next/link";

✔️ 필요성 Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다 ✔️ 방법 npm i sass next.config.js를 아래와 같이 수정해준다 //next.config.js const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } 루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다 원하는 CSS를 입력한 뒤 사용한다 /* Home.module.scss */ .t..

✔️ 설치 yarn add styled-components babel-plugin-styled-components yarn add @types/styled-components -D ✔️ pages/_document.tsx import Document, { Html, Head, Main, NextScript, DocumentContext, } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); con..