styled-components (3) 썸네일형 리스트형 [Next.js] svg component in Next 1. webpack 설치 npm install -D @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; 3. 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 4. tsconfig.json 수정 "include": ["custom.d.ts", "next-env.d.ts", "**/*.ts", "*.. [Next.js] Styled-Components in Next 1. styled-components 설치 npm i styled-components npm i @types/styled-components 2. babel 설치 npm install babel-plugin-styled-components npm i babe-preset-next 3. 프로젝트 루트 폴더에 .babelrc 파일 생성 { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } 4. .eslintrc.json 설정 { "extends": ["next/babel", "next/cor.. Next.js styled-components compile error 해결 Next.js에서 styled-components를 사용하는데 새로고침 할 때 마다 다음과 같은 에러를 발생했습니다. Next.js 12버전부터 babel 대신 swc를 사용하여 컴파일하도록 변경되었기 때문입니다. .babelrc가 있다면 babel을 사용하게 되므로 아예 babelrc를 제거한 다음, next.config.js 에서 styledComponents 설정만 해주면 swc를 사용하면서 문제를 해결할 수 있습니다. 이전 1 다음
