들어가기에 앞서 - 노마드 코더의 Next.js 무료 기초강의를 듣고 작성한 강의노트이지만, 강의에서 사용하는 Next.js의 버전이 최신버전이 아니므로 2023년 11월 현재의 최신 버전에선 제대로 작동하지 않았다. 공식문서 역시 참고하여 강의에서 설명한 코드와 비슷한 결과가 나오도록 정리하였다.

Next.js 는 framework

library vs framework

library

개발자가 불러오고 개발자가 library를 사용하여 무언가를 만든다.
react 에서는 내가 언제 react를 쓸지, 어떤 폴더구조를 만들지를 결정할 수 있다.

framework

framework는 개발자가 작성한 코드를 가져와서 무언가를 만든다.
특정한 규칙을 따라서 특정한 코드를 작성해야 정상적으로 작동한다.
즉 Next.js는 사용자가 접근할 수 없도록 추상화 시킨 React이다.

pages

next.js에서 페이지를 추가하는 법 - app 폴더 하위에 폴더를 추가하고 그 폴더 안의 page.tsx에 내가 만들고 싶은 페이지를 작성한다.
이렇게 하면 폴더의 이름이 경로가 된다.

@app/about/page.tsx

export default function About() {
    return (
        <div>
            <h4>감자감자</h4>
        </div>
    )
}

이 페이지는 localhost:3000/about 으로 접근할 수 있다.

pre-render

react: client side render

브라우저가 자바스크립트를 가져와서 유저가 보는 UI를 만든다.
첫 화면에는 빈 <div> </div> 태그만 보인다.
연결상태가 좋지 않을 때에는 첫 화면 로딩에 오랜 시간이 걸린다.

next.js: server side render

react와는 다르게 연결이 매우 느리거나 자바스크립트를 사용하지 않는 경우라도 실제 html코드를 볼 수 있다.
페이지가 로딩되었을 때 component 들을 미리 rendering해서 만든 html코드가 도착하고 이후 react.js를 실행시킬 수 있다.
이렇게 react.js를 프론트엔드 안에서 실행하는 것을 hydration이라고 한다.
이런식으로 구상할 경우 유저는 react나 JavaScript가 로딩되지 않아도 html로 작성된 콘텐츠들을 볼 수 있고, 이후 react 가 로딩되었을 때 이미 존재했던 부분들과 연결되어서 일반적인 react app과 같아진다.

routing

next.js 에서 a 태그를 navigation으로 사용하면 안된다.

<a> 태그를 사용하여 navigation을 구현한 경우, 페이지 사이를 이동할 때 페이지를 refresh 하기 때문에 SPA가 아니게 되어버린다.

그 대신 import Link from 'next/link' 를 통해 next에서 사용하는 <Link> 태그를 이용해야 한다.

이를 통해 next.js에서도 client side navigation을 구현할 수 있다.

@components/NavBar.tsx

import Link from 'next/link'
export default function NavBar() {
    return <nav>
	  <Link style = {{color: "red"}} className='Hello' href="/">
    Home
    </Link>
    <Link style = {{color: "blue"}} href="/about">
    About Us
    </Link>
    </nav>
}

pathname 따오는 방법

"use client"
import Link from 'next/link'
import { usePathname } from 'next/navigation'
export default function NavBar() {
    const pathname = usePathname();
    return <nav>
    <Link style = {{color: pathname === "/" ? "red" : "blue"}} className='Hello' href="/">
    Home
    </Link>
    <Link style = {{color: pathname === "/about"? "red": "blue"}} href="/about">
    About Us
    </Link>
    </nav>
}