반응형 Next4 [Next] ReferenceError: window is not defined 목차 1. 원인 Next는 SSR로 서버에서 렌더링 된다. window 객체는 브라우저 환경에서만 정의되고 서버 환경에서는 window 객체가 존재하지 않기 때문에 이러한 오류가 발생함. 2. 해결 2-1. AS-IS const currentURL = window.location.href; const handleCopyClipBoard = async () => { try { alert("복사되었습니다."); } catch (error) { alert("다시 시도해주세요."); } }; return ( ); 2-2. TO-BE window 객체가 존재하는지 판단하는 코드를 추가해준다. const currentURL = typeof window !== 'undefined' ? window.location.h.. 2024. 2. 14. [Next] Next+styled components에서 SVG 커스텀하기 목차 1. SVG 로더 설치 npm i @svgr/webpack 2. next.config.js 설정 module.exports = { webpack(config) { const fileLoaderRule = config.module.rules.find((rule) => rule.test?.test?.('.svg'), ) config.module.rules.push( { ...fileLoaderRule, test: /\.svg$/i, resourceQuery: /url/, // *.svg?url }, { test: /\.svg$/i, issuer: fileLoaderRule.issuer, resourceQuery: { not: [...fileLoaderRule.resourceQuery.not, /url/.. 2024. 1. 8. [Next] Next.js + Styled Components 사용하기 목차 1. Next.js에서 styled components 사용 시 깜빡이는 현상 환경 Next 14.0.4 styled-components 6.1.6 프로젝트를 진행하면서 Next.js와 styled components를 사용할 때 아래와 같이 깜빡임이 발생했다. 🧐 깜빡임이 발생하는 이유 styled-components는 CSS in JS로, JS안에 CSS를 작성하는 것을 의미한다. Next.js는 SSR(Server Side Rendering)로 Hydrate 과정에서 다운로드 받은 JS를 통해 지정된 스타일 정보가 생기기 때문에 페이지 로드 시 스타일이 잠깐 누락되어 깜빡이는 현상이 발생한다. Hydrate ? Server Side 단에서 렌더링 된 정적 페이지와 번들링된 JS파일을 클라이언트.. 2024. 1. 8. [Next] next.js 13 초기 세팅 목차 1. 설치하기 터미널에 아래 명령어 입력 (@latest는 최신 버전을 의미함) npx create-next-app@latest 프로젝트 폴더를 생성한 후 현재 위치한 폴더에 설치하고 싶다면 뒤에 . 을 입력한다. (. 은 현재 폴더를 의미) 현재 위치한 폴더에 설치하지 않고 위 명령어로 설치 시 √ What is your project named?이라는 질문이 나오면 프로젝트 이름을 입력해주면 된다. npx create-next-app@latest . 설치 시 아래와 같은 항목이 뜨는데 본인 프로젝트에 맞게 Yes or No를 선택해주면 된다. Ok to proceed? (y) y √ Would you like to use TypeScript? ... No / Yes √ Would you like.. 2023. 10. 13. 이전 1 다음 반응형
