Next.js란 무엇인가?

• Next.js란 풀스택 웹 애플리케이션을 구축하기 위한 React 웹프레임워크.
• 앱라우터와 페이지 라우터가 있음
  • 앱라우터: 서버구성 요소, 스트리밍과 같은 리액트 최신 기능을 사용할 수 있음.

👩🏻‍💻 Next 프로젝트 시작하기

npx create-next-app@latest

Prettier

• ESLint: 코드 품질 확인 및 버그, 안티패턴을 감지
• Prettier - 코드 포맷팅: 코드 스타일 및 포매팅 관리, 일관된 코드 스타일 적용 가능

Next.js + TypeScript + Tailwind CSS の開発環境をできるだけ丁寧に構築する【2024年】

👩🏻‍💻 동적 경로

미리 정의할 수 없는 동적 경로의 경우 대괄호[] 를 이용해 작성. 그러면 URL의 세크먼트 값이, params Prop으로 전달되고, 대괄호 사이의 폴더 이름이 속성이름이 된다.

만약, 쿼리스트링을 사용하는 경우에는 searchParams Props으로 전달.

Case1 [slug]

main > [slug]의 경우 /main/hahaha로 이동 후 params를 확인해보면 { slug : ‘hahah’ } 임을 확인할 수 있다.

Case2 [[…slug]]