Next.js 13 배워보기

이혜란·2023년 5월 28일

Next.js

목록 보기

1/12

Next.js 13버전 기준으로 정리한 내용입니다.

1. 설치하기

터미널에 npx create-next-app@latest 명령어를 입력해 프로젝트를 생성해 줍니다.
타입스크립트와 같이 사용하고 싶을 때에는 npx create-next-app@latest --typescript 명령어를 입력해주면 됩니다.
설치가 끝난 후 npm run dev를 입력해 페이지가 잘 열리는지 확인해 주시면 됩니다.

create react-app으로 설치한 React 프로젝트를 만든다면 항상 App Component로 시작하고 컴포넌트 폴더를 만들지 라우터 폴더를 만들지를 자신이 자유롭게 결정할 수 있습니다. (라이브러리 특징)

Next JS는 특정한 규칙을 따라야 정상동작하게 됩니다. 자신이 코드를 어떤 곳에 넣으면 프레임워크가 그 코드를 부르는 형태로 동작하게 됩니다. (프레임워크 특징)

2. 페이지 라우팅

페이지 라우팅 기능을 1년전에 녹화된 강의를 보고 적용해 보았지만 이미 사용법이 바뀌어 동작하지 않았고 공식문서를 확인하여 해결할 수 있었습니다.

최신 next js를 설치하게 되면 pages 폴더가 따로 없고 app폴더 안에 page.js 파일만 존재합니다. 이 page.js 파일이 home(/)경로가 됩니다.

pages 폴더를 추가로 만들지 않고 원하는 URL 경로 명의 폴더를 만든후 그 안에서 기본 랜더링 될 파일인 page.js 파일을 새롭게 생성하면 됩니다.

-src(폴더)
	-app(폴더)
    	-page.js(파일) //http://localhost:3000/
        -about(폴더)
        	-page.js(파일) //http://localhost:3000/about
        .
        .

프론트엔드 기술은 빠르게 업데이트 되기 때문에 공식문서를 참고하는 것의 중요성을 다시 한번 깨달았습니다.

여기서 또 한가지 중요한 점은 랜더링 되는 page.js의 기본 파일에서는 무조건 export default로 컴포넌트가 반환되어야 한다는 점입니다. export default로 컴포넌트를 내보내주지 않으면 에러가 발생하게 됩니다.

3. usePathname

기존에는 현재있는 페이지의 pathname을 얻고자 할 때 useRouter 라는 훅을 사용해서 pathname을 알아낼 수 있었습니다. 현재 업데이트 된 최신 기술로는 usePathname이라는 훅을 사용해서 pathname을 알아낼 수 있습니다.

"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";

export default function NavBar() {
  const pathname = usePathname();

  return (
    <nav>
      <Link href="/" style={{ color: pathname === "/" ? "red" : "blue" }}>
        home
      </Link>
      <Link
        href="/about"
        style={{ color: pathname === "/about" ? "red" : "blue" }}
      >
        about
      </Link>
    </nav>
  );
}

4. import 없이 .jsx 사용하기

React 프로젝트에서 jsx를 사용하려면 import react from "react"; 와 같이 React.js를 import 해서 사용할 수 있었습니다.
하지만 Next JS에서는 이러한 과정 없이 아래와 같이 바로 jsx 문법을 사용해 줄 수 있습니다. 이때 파일명이 .jsx 가 아니어도 동작합니다.

export default function Home() {
  return (
    <div>
      <h1>Home</h1>
    </div>
  );
}

단, useEffect나 useState같은 리액트 메서드를 적용할 때에는 기존과 동일하게 react.js를 import 해주어야 사용이 가능합니다.

5. Pre-Rendering

기본 React로 만들어진 사이트들은 client-side render를 하는 앱을 만듭니다.
CSR의 특징은 유저가 보는 UI를 만드는 모든 것을 한다는 점 입니다.
다시 말해 브라우저가 자바스크립트 파일을 가져와서 client-side의 자바스크립트가 모든 UI를 만든다는 것 입니다.

CSR의 단점은 느린 네트워크 환경에서 실행될 때 첫 화면에 아무것도 그려지지 않고, 자바스크립트 파일을 가져와서 읽기 시작하는 시점부터 화면에 페이지가 그려지기 때문에 유저들이 빈 화면만 보고 있을 수 있다는 점 입니다.

하지만 Next JS를 사용한 페이지에서는 느린 네트워크 환경에서나, 자바스크립트가 비활성화 되어 있어도 빠르게 html 요소들을 화면에서 볼 수 있습니다.