NextJS

app router의 라우팅여기서는 js라고 표현하겠지만 우리는 ts를 사용할 예정이니, tsx라고 생각하기Page.jsapp > 폴더이름 > page.js예) app > about > page.js에 해당되는 코드에 접근하려면 배포주소/about라는 url로 들어가면 됨동적 라우팅은 폴더에 [원하는 이름]예) app > posts > [slug]는 posts/1, posts/2 등 posts 뒤에 오는 모든 리소스에 해당되는 페이지임동적라우팅을 할 때에만 각 페이지의 prop으로 params라는 프로퍼티에 객체로 {slug(설정한 동적 경로 이름) : 11(경로 값)} 형태의 키-값 쌍의 값을 가짐import Image from "next/image";import styles from "./page.m..

nextjs에서는 _app.tsx 파일에서만 .css 파일을 사용할 수 있다. 그 이유는 일반적인 .css 파일은 브라우저에 보여질 때 하나의 파일로 합쳐지는데 이름이 같은 클래스가 있으면 충돌이 발생한다. 하지만 module.css를 사용하면 빌드 시 식별자 앞에 해쉬가 붙어서 이름 충돌 문제가 해결된다. 즉, 모든 클래스 이름이 지역 스코프를 가지게 된다. 따라서 다른 컴포넌트들에서는 module.css를 사용해야한다. 그렇지 않을 경우 다음과 같은 에러를 마주하게 된다. 또 다른 에러는 "Selector is not pure"라는 오류는 주로 Next.js에서 CSS Modules를 사용할 때 발생하는데, 이 오류는 선택자(selector)가 순수(pure)하지 않다는 것을 나타낸다. 여기서 "순수..