03.22 - Next.js > window 등 client 객체 사용 / tailwind css의 mobile first

Next.js에서 window 등 client 객체 사용하기

• Next.js는 기본적으로 SSR임
• 따라서 평소처럼 window, document 등 client에서 쓰는 객체를 평범하게 사용하려고 하면 반드시 error가 남
• 위와 같은 객체들은 꼭 useEffect를 통해 mount 되고 사용하는 것을 추천함

Next.js에서 window 객체를 사용해 화면 크기를 구하는 hook 예제

https://stackoverflow.com/questions/63406435/how-to-detect-window-size-in-next-js-ssr-using-react-hook

How to detect window size in Next.js SSR using react hook?

 

tailwind css의 mobile first

• tailwind는 mobile first임
• 따라서 반응형으로 스타일링을 할 때, mobile을 default로 하고, pc를 옵션으로 설정해야 함(mobile을 타겟으로 하는 것들 sm:...등은 사용하지 않아야 함

https://tailwindcss.com/docs/responsive-design#mobile-first

Responsive Design - Tailwind CSS