_app.js 에 getInitialProps 사용했더니 요 에러가 갑자기 나는거;; 첨 보는 에러라.. 구글 검색!!! 알고보니 서버에서 받아오는 데이터랑 client 에서 데이터랑 다르다 그니까 핸들링 해줘라 모 어쩌구 .. ㅎㅎ 요래서 나는 에러였슴 받아올 데이터 값을 state로 만들고 useEffect 안에서 state 값 변경하니 에러가 해결 되었다. // before const MsgList = () => ( {msgs.map(x => )} //msgs 가 서버에서 받아올 데이터 ) // after const MsgList = () => { const [msgArr,setMsgArr] = useState() useEffect(()=>{ setMsgArr(msgs)// state에 데이터 저장..

Next.js 에서 이미지를 최적화 해주는 Image 컴포넌트! 경로가 헷갈려서 가끔 안될때가 있어 정리해보았다. 로컬기준으로 public 폴더에 image를 넣어주면 이미지 컴포넌트를 사용할경우 불러올수있다. 외부에서 불러오는 이미지는 next.config.js에 따로 설정해야 한다고 한다. 로컬에서 불러올때 두가지 방법이 있는데 Image 컴포넌트 src프로퍼티에 직접 경로를 넣어주는 방법과 import해오는 방법이 있다. 나는 루트에 public 폴더를 설정하고 그 안에 images 폴더를 만들어 주었다. - src 에 경로 설정 (public 을 / 로 표현) import Image from 'next/image' export default function Home() { return ( ) } ..

Next.js 에서 window.innerWidth 값 구하다 window is not defined 오류 발생! 서버사이드 렌더링 할때 서버엔 window , document 객체가 없기 때문에 발생하는 오류이다. 그래서 useEffect or componentDidMount 에서 사용해주어야 한다. const Project = () => { const [windowWidth, setWindowWidth] = useState(0) // resize 될때만 함수 불러오기 let timer const resizeWindow = () => { clearTimeout(timer) timer = setTimeout(() => { // 현재 window width 값 setWindowWidth(window.inn..

Next.js 배포후 스타일이 새로고침 할때 풀렸다가 다시 적용되는 현상을 발견했다. 개발모드에서는 로딩이 느리기 때문에 넘어갔었던 문제인데 배포하니 스타일이 아예 풀렸다가 다시 적용이 되었었다. 이건 백프로 styled-components 에 문제가 있을것이다 라고 생각을하고 코드를 뒤적거리며 검색을 한 결과..! _document.js 문제였다 수정전 import { ServerStyleSheet } from "styled-components" import { ServerStyleSheets } from "@material-ui/core/styles" export default class MyDocument extends Document { static async getInitialProps(ctx)..

💡 Vercel vercel 은 Next.js 에서 제공하는 배포플랫폼 이다. Next.js 공식문서에 가보면 Vercel로 배포하는것을 추천하고 있다. github 를 사용하여 프로젝트를 배포할수있고 Next.js 에 최적화 되어 있다고 한다. 또한 Next.js 는 각 요청들을 빨리 라우팅 하기위해 전세계에서 cdn을 운영하고 있는데 한국에도 cdn이 제공되고 있다. 나는 내 프로젝트가 소규모고 Next.js를 기반으로 작업하였기 때문에 Vercel로 배포하는것을 선택하였다. 1️⃣ pakage.json deploy 추가 deploy는 배포시 명령어로 사용해야하기 때문에 추가한다. next export 는 서버없이 html만 내보낼경우 사용하는 명령어이다. deploly 명령어를 실행하면 next b..

next.js는 프리렌더링(pre-rendering) 기능을 제공합니다. 말 그대로 사전에 미리 html을 렌더링 한다는 것인데요 즉 html을 미리 생성하고 최소한의js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 html을 로드하면서 나머지js를 불러와 화면에 렌더링 시켜주는 것이죠. next.js는 주로 두가지 프리렌더링 방법을 제공합니다 - Server-side rendering: SSR - Static site rendering: SSG next.js의 프리렌더링 으로 각 page에 getServerSideProps ,getStaticProps, getStaticPaths 를 사용해서 데이터를 가져올수 있습니다 1. getServerSideProps (SSR) getServerSidePro..