lou@blog $ _

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

Next.js에서 제공하는 Image 컴포넌트를 사용해서 이미지 로딩을 하는 중, 거의 700ms 정도에 육박하는 충격적인 로딩속도를 보여주어서 구글링 해봤다. 이건 Image 컴포넌트가 사용하는 기본 이미지 프로세서 때문이라고 하는데, sharp 패키지를 설치하면 해결된다. 패키지를 설치하면 정말 빠르게 이미지가 로딩되는 것을 확인할 수 있다. yarn add sharp

next-connect는 Next.js에서 미들웨어를 사용할 수 있게 도와주는 라이브러리다. 여기서 말하는 미들웨어는 웹 서버에서의 미들웨어(Middleware)와 의미가 통하는데, 요청과 응답 사이 중간에서 한번 거치면서 수행되는 함수다. 보통 여기서 연결된 DB 객체를 넘겨준다던가 세션 관리를 하게된다. 시작하기 몽고 DB를 설치하자. 귀찮게 몽고DB설정까지는 다루지 않을 것이다. 사실...패키지 설치부터 말하는 것 조차 귀찮지만!ㅋㅋㅋ yarn add mongodb middleware라는 폴더를 생성하고, 그 아래에 database.ts를 추가시켜 주자. 이 파일에서는 연결된 mongodb가 없다면 새로 연결해서 req 객체에 담아 넘겨줄 것이다. src/ ├── pages/ │ └── api/ │..

환경변수를 프론트에서 사용하려 했을때 .env.*에 선언되어있음에도 불구하고 undefined로 나올 것이다. 다음과 같이 환경변수가 선언되어있다고 가정하면, MY_NAME="lou" Next.js Version 9.4 이상 Next.js 버전이 9.4+ 인경우, 환경변수 이름에 NEXT_PUBLIC_을 프리픽스(prefix) 붙여주면 사용가능해진다. 따라서, MY_NAME 환경 변수명을 NEXT_PUBLIC_MY_NAME으로 바꾸어준다면 해결된다. Next.js Version 9.4 미만 그렇지 않을 경우 next.confg.js에 사용할 환경변수를 설정해주어야한다. module.exports = { env: { MY_NAME: process.env.MY_NAME, }, }