반응형 개발/Next.js35 Next.js "Reference Error: document is not defined" Reference Error: document is not defined document is not defined 를 해결하려면 next.js의 작동방식을 먼저 알아야 한다. CSR(Client side rendering)인 리액트와 달리, Next는 첫 렌더링에서 SSR(Server side rendering)방식을 취한다. 서버에서는 document를 찾을 수 없다. 이를 간과하고 document같은 브라우저에서만 작동하는 기능을 SSR이 작동하는 시점에 이용하면 Reference Error : document is not defined 에러가 발생한다. Next.js에서 ReferenceError : document is not defined 가 뜰 때 해결책은 총 3가지이다. 1. window .. 2022. 3. 2. shallow route 를 이용하여 data fetching없이 url바꾸기 next.js 공식문서에 따르면, Shallow routing을 사용하여 url을 데이터 fetching 없이 바꿀 수 있다고 한다. shallow routing을 사용하기 위해, shallow option을 true로 설정해야 한다. 공식문서를 그대로 따라가보자 import { useEffect } from 'react' import { useRouter } from 'next/router' // Current URL is '/' function Page() { const router = useRouter() useEffect(() => { // Always do navigations after the first render router.push('/?counter=10', undefined, { sh.. 2022. 2. 11. Warning : Props 'className' did not match client: server: 리액트에서는 전혀 말썽이 없던 styled-component가 말썽을 부렸다. Next는 서버에서 한번, 클라이언트에서 한번 총 두번 렌더링하게 되는데 이때 styled-component에 의해 랜덤으로 생성되는 클래스명이 일치하지 않아서 생기는 문제이다. 구글링을 통해 쉽게 해결할 수 있었다. npm i babel-plugin-styled-components 바벨 플러그인을 설치하고 바벨설정을 추가함으로 해결할 수 있다. .babelrc 설정 최상단 디렉토리에 .babelrc 를 추가하고 다음과 같이 작성 { "presets": ["next/babel"], "plugins": [ ["babel-plugin-styled-components", { "fileName": true, "displayName":.. 2022. 2. 7. getServerSideProps Next.js에서는 페이지의 내용들을 다양한 방식으로 렌더링 할 수 있다. 그 중 getServerSideProps() 함수를 사용하면 해당 페이지에서 Server Side Rendering을 할 수 있다. getServerSideProps getServerSideProps()에 어떤 코드를 쓰던간에 그 코드는 sever에서 돌아간다. (기존 리액트는 특별한 조치가 없다면 client side rendering) import React from "react"; import axios from "axios"; import Seo from "../components/Seo"; //getServerSideProps()함수가 리턴하는 props.results가 ./pages/_app.js 를 통해 Home컴포넌.. 2022. 1. 30. 이전 1 ··· 4 5 6 7 8 9 다음 반응형
