다음 개발을 위해 next.js 노마드코더 강의를 들었다.
지원서 사이트를 하면서 next.js를 사용해보았지만, 공부를 하지 않고 감으로 때려 맞추고,
그때 그때 구글링을 통해 공부를 하였지만, next의 기초를 모른다는 생각이 들었다.
Next프로젝트는 yarn create next-app을 통해 next프로젝트를 생성할 수 있다.
만약에 typescript를 쓰고 싶다면? 뒤에 --typescript를 추가하여 작성해준다.
yarn create next-app --typescript
프로젝트가 생성이 되면, 위와 같은 파일 구조가 나온다.
pages의 폴더 내에 있는 파일들이 next.js를 실행했을 때의 url이 된다.
개발을 하면서 기본이 되는 index.js의 파일이 url의 기본주소가 되며, pages폴더 내에 about.js파일을 생성하면
기본주소 뒤에 /about를 넣는다면 해당 페이지로 이동을 할 수 있다.
즉! pages내의 파일 명이 url의 이름이 되는 것이다.
단, 함수를 만들 때 export default를 이용하여 만들어야한다.
react와 다르게 next는 웹에 있는 페이지들이 미리 렌더링 되는 것이다 => pre rendering
이처럼, 페이지를 이동할 때 a태그를 사용하면 페이지가 미리 렌더링 되는 next를 사용하는 것이 아니다.
그래서 우리는 Next로 개발을 하면서 페이지 이동은 a태그가 아닌,
a 태그 대신 next/link의 안에 내장되어있는 Link를 사용하여야 한다.
ex)
<Link href="/">
<a className={router.pathname === "/" ? "active" : ""}>Home</a>
</Link>위와 같이 Link로 묶어주고, a태그를 사용하여준다.
단 ! Link 태그에 이동할 주소를 적어준다.
클래스 이름 여러개 다는 방법
클래스 이름은 링크 태그가 아닌, a태그에서 달아주어야한다.
다는 방법은 {} 인 중괄호를 이용하여 써주면 되는데, 여러개의 클래스이름을 달고 싶을 때는 방법이 다르다.
<a
className={`${styles.link} ${router.pathname === "/" ? styles.active : ""}`}>
</a>위와 같이 백틱을 사용하는 방법과,
<a
className={[
styles.link,
router.pathname === "/about" ? styles.active : "",
].join("")}
>
</a>배열 []을 이용하여, join해주는 방법이므로, 본인이 편한대로 해주면 된다.
Global Styles
import "../styles/globals.css"; 는 _app.js내에서 하기!
페이지나 컴포넌트 내에서 css를 import할 때는 반드시 모듈이어야하므로 주의해준다.