1. cmd에 cd 경로명을 입력하여 프로젝트 생성을 원하는 공간을 지정한 후 npx create-next-app@latest을 입력하여 프로젝트를 생성한다
2. code 프로젝트명을 입력하여 vsc에서 프로젝트를 연다
3. npm run dev를 vsc 터미널에 입력하여 문제가 없는지 확인한다
4. url에 접속하였을 때 아래와 같이 뜨면 정상적으로 작동 중인 것이다
5. pages 폴더에서 index.js를 제외한 모든 파일들은 지운다
6. index.js를 페이지를 나타내는 필수적인 코드인 다음의 코드로 수정한다
index.js
export default function Home() {
return (<></>)
}
6. next.js에서의 pages 폴더 안의 파일은 그 파일명의 url 페이지를 생성한다
* index.js 는 파일명이 아닌 홈페이지 (' / ')를 나타낸다
7. export default function의 컴포넌트명은 파일명과 같지 않아도 된다
8. jsx를 쓰고 있다면 React.js를 import할 필요가 없다
9. next.js의 가장 좋은 기능 중 하나는, 앱에 있는 페이지들이 미리 렌더링 된다는 것이다 이들은 정적으로 생성된다
* creat react app은 client-side render(브라우저가 유저가 보는 모든 UI를 만듦)의 앱을 만든다 즉, 브라우저가 자바스크립트를 가져와서 client-side의 자바스크립트가 모든 UI를 만드는 것이다 브라우저는 자바스크립트 코드가 왔을 때만 UI를 만들 수 있다
** 반면 next.js는 자바스크립트를 비활성화하여도 UI를 나타낼 수 있다
10. next.js의 또 다른 좋은 기능은 Hydration이다
* react.js를 프론트엔드 안에서 실행하는 것을 hydration이라 일컫는다 next.js는 react.js를 백엔드에서 동작시켜서 페이지를 미리 만드는데 이는 component들을 render시킨다 Rendering이 끝났을 때 이는 HTML이 되고 next.js는 그 HTML을 페이지의 소스코드에 넣는다 그럼 유저는 자바스트립트와 react.js가 로딩되지 않았더라도 콘텐츠를 볼 수 있게 된다 그리고 react.js가 로딩되었을 때, 기본적으로 이미 존재하는 것들과 연결되어 일반적인 react.js 앱이 되는 것이다
** 주의할 점은 next.js가 동작한 react.js는 자바스크립트가 비활성되었을 때는 작동하지 못한다는 것이다
11. 페이지를 이동할 때 페이지 전체가 로딩되는 것을 막으려면 a 태그를 Link 태그로 감싸야 한다
import Link from "next/link"
export default function NavBar() {
return (
<nav>
<Link href="/">
<a>Home</a>
</Link>
</nav>
)
}
12. next.js의 package.json을 확인해보면 next, react, reactdom이 모두 설치되어있는 것을 확인할 수 있다 우리가 CRA를 사용할 때 이를 모두 따로 설치해줬어야 했던 것과 달리 next.js에서는 설치 과정이 필요하지 않다
13. useRouter()은 다음 코드와 같이 페이지에 관한 Hook을 걸 수 있다
import Link from "next/link"
import { useRouter } from "next/router"
export default function NavBar() {
const router = useRouter()
return (
<nav>
<Link href="/">
<a style={{color: router.pathname === "/" ? "red" : "blue"}}>Home</a>
</Link>
<Link href="/about">
<a style={{color: router.pathname === "/about" ? "red" : "blue"}}>About</a>
</Link>
</nav>
)
}
(+) useEffect가 두 번 실행되는 것을 막으려면 next.config.js의 reactStrictMode를 false로 바꿔준다
