🤍 은지log 🤍

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()? - Next/Link의 children으로 component를 줬을때 생기는 error 입니다. 이 코드에서 error가 발생했을시 , 1. component를 a tag로 감싸줍니다. // 수정된 코드 2. a태그를 styledComponents로 감싸주면 a tag의 lint error가 사라집니다. const CustomLink = styled.a``; // styled-components 부분 3. 공식문서의 주의사항을 참고하여 passHref를 추가해줍니다.

🍓 프로젝트 세팅 필요한 디펜던시를 설치합니다. npm i -D babel-plugin-styled-component 🍓 .babelrc 먼저 바벨 파일을 수정합니다. 아래 파일은 next.js의 ssr과 연관이 있는데, ssr에 의해 styled-components 스타일이 적용 전에 화면 렌더링이 되는 문제를 방지하기 위함입니다. { "presets": ["next/babel"], "plugins": [ [ "babel-plugin-styled-components", { "fileName": true, "displayName": true, "pure": true, "ssr": true } ] ] } NextJS에서 Styled-components 사용하기 npm i styled-components n..

🍓 프로젝트 세팅 next 프로젝트를 설치하고 이후 필요한 디펜던시를 설치합니다. npx create-next-app my-app cd my-app npm i @emotion/react @emotion/styled @mui/icons-material @mui/material @mui/styles nextjs는 서버사이드랜더링을 하기 때문에 react에서 mui를 사용하는 것 처럼 손쉽게 반영 되지 않습니다. 그래서 몇가지 사전작업을 해야합니다. 🍓 _document.tsx _document는 서버사이드에 관여하는 로직 또는 static한 로직을 추가하는데 사용합니다. (_document가 하는 일을 잘 모르겠다면 nextjs 기본 (opens new window)이 포스팅을 참조해주세요.) ssr 지원을..

Next.js의 getStaticProps와 getStaticPaths api를 사용하면 static 페이지를 생성할 수 있다. getStaticProps: 빌드 시 데이터를 fetch하여 static 페이지를 생성 getStaticPaths: pages/**/[id].tsx 형태의 동적 라우팅 페이지 중, 빌드 시에 static하게 생성할 페이지를 정함 🔆 getStaticProps .tsx에서 export async function getStaticProps(context) 형태로 사용. context.params로 동적 라우팅의 경로 이름을 가져온다. pages/posts/[id].tsx 페이지를 /posts/123으로 접근했다면 context.params는 { id: "123" }이 된다. { p..

Warning: Expected server HTML to contain a matching in . 이 에러는 서버사이드 렌더링 시의 html과 클라이언트 사이드 렌더링 시의 html이 일치하지 않아서 발생하는 에러로 추측된다. 그래서 실제로 브라우저의 쿠키를 삭제하면 해당 에러가 발생하지 않는다는 것을 확인할 수 있었다. 해결방안 브라우저 쿠키 삭제 브라우저의 쿠키를 삭제해서 html을 아예 새롭게 렌더링하면 해당 에러가 발생하지 않습니다. 브라우저가 기억하고 있는 html이 없기 때문입니다. 다만 계속 테스트를 하면서 작업을 할 때는 브라우저의 쿠키를 계속 삭제한다는 게 번거롭기 때문에 다음과 같이 코드를 추가해 해당 문제를 해결했습니다. useEffect를 사용해서 렌더링 후 상태 업데이트 use..

Next.js에서 제공하는 SSR, 하지만 우리는 SSR에서 사용하지 못하는 객체인 window 객체를 사용할 때가 많습니다. 그럴때 해결하는 방법 ! 1. typeof 를 사용. if(window){...} // window is not definde 에러발생 if(typeof window !== undefined) {...} // 정의되지않은 window의 타입이기떄문에 undefied가 발생 -> 에러가 발생하지 않습니다. 간단하게 이러한 방법으로 window객체가 있는지 체크하는 방법이 있습니다. 2. useEffect를 사용. useEffect(()=>{ // 안에서 window 객체를 사용 },[]) useEffect는 DOM형성 후에 실행이 되는 hook입니다. 고로 브라우저가아닌 서버에서 ..

npm install -D @svgr/webpack webpack을 설치합니다. // next.config.js 설정 module.exports = { webpack(config) { config.module.rules.push({ test: /\\.svg$/, use: ["@svgr/webpack"], }); return config; }, }; next.js 프로젝트를 처음 생성시 같이 생성되는 next.config.js를 설정해줍니다. // 프로젝트 루트 폴더에 custom.d.ts 파일 생성 declare module "*.svg" { import React from "react"; const svg: React.FC; export default svg; } 프로젝트 루트 폴더에 custom.d...

npm i styled-components npm i @types/styled-components styled-components 를 설치합니다. npm install babel-plugin-styled-components npm i babe-preset-next babel plugin 을 설치하고 .babelrc 파일을 만들어 줍니다. Next.js는 페이지 접속 시 SSR를 이용하고 이후 페이지 이동 시 CSR를 이용하여 페이지를 렌더링합니다. 이때 server와 client에서 생성하는 class 해시값이 달라 충돌로 인해 문제가 발생할수 있습니다. babel 설정으로 충돌 문제를 해결할수 있습니다. 프로젝트 루트 폴더에 .babelrc 파일 생성 { "presets": ["next/babel"],..

Next JS 설치 npm create-next-app . / npm create-next-app —typescript . ✏️ * name can no longer contain capital letters 라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것이므로 " 소문자 " 로 변경 Next.. eun-jii.tistory.com .module.css 파일 생성 CSS 를 적용할 파일과 같은 폴더에 파일명.module.css 파일 생성 ex) NavBar.js NavBar.module.css .active { color: tomato; } .link { text-decoration: none; } 코드를 css에 적고 import styles from "./NavBar.module.css";..

설치 npx create-next-app@latest . npx create-next-app@latest --ts . ✏️ * name can no longer contain capital letters 라는 에러가 뜨면 폴더명에 " 대문자 " 가 있어서 뜨는것이므로 " 소문자 " 로 변경 npm run dev 실행 NextJS 와 React react = library , CSR(client-side-rendering) Nextjs = framework , SSR(server-side-rendering) ✏️ CSR : 클라이언트 사이드 렌더링 이란 사용자의 요청에 따라 필요한 부분만 응답 받아 렌더링 하는 방식 SSR : 서버사이드 렌더링의 약자로 서버로부터 완전하게 만들어진 html파일을 받아와 페..