nextjs적용하기

next적용하기

처음 next를 적용하면서 설정하는 것들을 정리해봄

• nextjs설치(13버전)
• typescript적용
• react적용
• tailwinds적용

처음 설치

• next는 create-next-app을 이용해 쉽게 진행함.
• node는 16.8 이상으로

  npx create-next-app@latest --ts --tailwind

• typescript적용, tailwind적용
• 나머지는 알아서 적용하면된다.
• Would you like to use src/ directory with this project?
  • src폴더로 감싸서 해준다.
• Use App Router (recommended)?
  • app router를 쓸지 page router를 쓸지 선택한다.
  • yes는 app router로 적용, 안쓰면 page router로 적용된다.
  • app router를 추천하는 이유는 13버전에서 page에서 app으로 업그레이드 된거니까!
  • app router는 좀더 사용해보고 정리할 예정
    • 폴더를 기준으로 router가 된다. 왜 바뀌었는지 궁금하다.
• Would you like to customize the default import alias
  • @으로 import할지 말지 설정 가능하다.
  • yes를 하면 What import alias would you like configured? ... @/*로 나온다. @가 root로 해서 import가 가능해진다.

globals.css

• 모든 페이지에 적용하는 전역 css이다
• tailwinds를 적용하기 위해 전역 css넣기
  • @tailwind base;같은것들을 넣어야 함
• 처음 해맨거 중 하나가 tailwinds를 위처럼 create-next-app로 안했을때 css를 넣지를 못했었다.
  • css를 찾지 못하는 에러가 발생

• 이렇게 넣으면 된다.

• app router의 경우

• page router의 경우

• 위는 create-next-app할때 옵션을 건들면서 확인하면 이해하기 쉬움
• create-next-app에서 tailwind 옵션을 넣었으면 알아서 만들어준다.

실행!

• npm start로 바로 실행되는게 아니더라
• npm run build를 하고 나서 npm start를 해야한다.
• 개발하면서 hot reload를 하고싶다면?
  • npm run dev로 하면 develop모드로 실행한다.
  • 파일이 변경되면 알아서 바뀌어서 실행된다.

참고

• 공식next