nextjs

Next.js 에서 Next/Image를 사용하여 이미지 처리하기

Using `` could result in slower LCP and higher bandwidth. Use `` from `next/image` instead to utilize Image Optimization. See: https://nextjs.org/docs/messages/no-img-elementeslint@next/next/no-img-element nextjs에서는 react에서 사용하는 것과 동일하게 img 태그로 이미지 처리를 하게 되면 eslint가 경고를 띄웁니다. 를 사용하면 LCP속도가 느려지므로 next.js에서는 를 사용하여 이미지 최적화를 하라는 경고입니다. 위 문구를 무시하고 사용할 수는 있지만 근본적인 해결방법은 아닙니다. 그럼 어떻게 바꿔서 사용하면 될까요? 사용법..

Next.js | Next.js + Styled-Components 초기 세팅 (next 13)

styled-components는 CSR로 작동하기 때문에 SSR인 next-js에서는 styled이 적용되도록 따로 설정이 필요합니다. (설정을 하지 않으면 스타일이 적용되기 전에 렌더가 되어 화면이 보이는 현상이 나타납니다..🤦🏻‍♀️) 1. 설치 npm i styled-components npm i -D @types/styled-components babel-plugin-styled-components 2. next.js에서 사용하도록 설정하기 1) .babelrc 생성 { "presets": ["next/babel"], "plugins": [ [ "styled-components", { "ssr": true, // SSR을 위한 설정 "fileName": true, // 코드가 포함된 파일명을 알..

Next.js | Next.js + typescript 초기 세팅 (next 13)

1. 설치 및 실행 설치 npx create-next-app --typescript # or yarn create next-app --typescript # ... What is your project named? (프로젝트 이름) Would you like to use ESLint with this project? (eslint를 쓸건지 => yes) 실행 # 개발자 모드 npm run dev 2. ESLint, Prettier 세팅 1) 설치 npm install --save-dev prettier eslint-config-prettier eslint-plugin-prettier eslint-config-prettier : prettier와 충돌할 수 있는 eslint 규칙들을 꺼줍니다. eslint..