next.js

_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..

Link로 동적라우팅 사용할때 props전달 하는 방법! //app.js import Link from "next/link" const obj = {name:'cccyyyy'} 이동 pathname : 해당하는 라우팅 query : 전달할 props를 넣어주고 현재 obj가 object인 상태이기 때문에 문자열로 바꿔주기위해 JSON.stringify()를 사용. as: props전달할때 url뒤에 표시 //[id].js import { useRouter } from "next/router" const view ()=> { const router = useRouter() const { currentName } = router.query const currentPost = JSON.parse(name) (..

next.js 에서 이미지를 어떻게 import해와야 하나해서 찾아봤는데 생각보다 복잡했다. 첫번째방법으로 단순히 상단에서 이미지를 import해와서 img태그에 src에 넣어주면 될줄알았는데 오류가생겼다 Unexpected character '�' (1:0) 위의 오류가 나서 구글링 해보니 next.js 내에서 이미지 설정을 또 해줘야 하는거 같았다. webpack에서 cofig.js 에서 url-loader를 따로 적용해줘야 하는것처럼 말이다. npm i next-images 모듈을 설치후 next.config.js 파일을 만들어서 아래 코드를 넣어주면 오류가 해결되었다 const withImages = require('next-images') module.exports = withImages() 두..