1. Dynamic Routes NextJS는 폴더와 파일명을 이용해 라우팅을 할 수 있다. /movies/all이라는 URL을 만들고 싶다면 movies 폴더를 만들고 그 안에 all.js 파일을 생성하면 된다. 그냥 /movies라고만 하고 싶다면 movies 폴더 안에 index.js 파일을 만들어주면 된다. URL에 변수를 넣고 싶을 때는 대괄호 안에 사용하고자 하는 변수명을 적어서 Dynamic Route를 생성할 수 있다. 만일 page/movies/[id].js 파일을 생성했다면 /movies/1, /movies/abc 등과 같은 경로와 모두 일치한다. router를 콘솔에 찍어보면 query를 찾을 수 있다. query: {id: '1'} query에는 id가 있는데 이 id는 바로 URL..

1. CSS Modules 넥스트 어플리케이션에 CSS를 추가하는 방법 중 하나는 modules를 사용하는 것이다. NavBar.module.css .nav { text-decoration: none; } 이름은 상관 없고 중요한 건 .module.css이다. css를 작성하고 이 파일을 사용하고 싶은 곳에 자바스크립트 오브젝트로서 import를 시키면 된다. import styles from "./NavBar.module.css" 모듈이기 때문에 className="nav"가 아니라 className={styles.nav}처럼 작성해줘야 한다. 이게 작동하는 이유는 .module.css 패턴을 사용했기 때문이다. 이 패턴은 css 모듈이라고 불리는데 이건 개발자로 하여금 평범한 css를 사용할 수 있도..

1. Creating a Project NextJS 프로젝트 최신 버전으로 생성 → npx create-next-app@latest 타입스크립트 사용 → npx create-next-app@latest --typescript 실행 → npm run dev 2. Library vs Framework 라이브러리는 개발자가 사용하고 싶을 때 불러와서 원하는 대로 코드를 작성하는 것이 가능하다. 리액트는 개발자가 원할 때 부르고 원할 때 사용하는 라이브러리이다. 프레임워크에서는 특정한 규칙을 따라서 특정한 걸 해야한다. 규칙을 따랐을 때 모든 게 정상적으로 잘 동작하고 프레임워크도 개발자를 도울 수 있다. 개발자가 규칙을 따라서 코드를 적절한 위치에 잘 작성하면 프레임워크가 그 코드를 호출하여 모든 걸 동작시킨..