[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 1 (라우팅)

React의 가장 큰 장점이자 단점인 SPA(Single Page Application) 때문에,

페이지의 SEO에 문제가 있어 여러 해결 방안을 찾아보았지만 결국 Next.js로 변경하는 것이 좋겠다고 결론지었다.

 

Next.js를 어떻게 시작해야 하나 고민하던 차에 이 책을 발견하게 됐다.

클론 코딩으로 시작하는 Next.js - 교보문고

일단 이 책 보고 따라해볼까.. 하며 시작했고 조금 감을 잡아나가며 내 프로젝트도 변경하는 중!

그래서 지금부터 작성할 글들은 아마 대부분? 저 책의 내용을 바탕으로 작성될 예정.

 

책을 잘 샀다고 느낀 점이,

혼자 시작하니 막막했던 폴더구조 설계도 책의 내용을 보며 따라하기 좋았고,

코드를 작성함에 있어 새로운 방식을 알게 될 수 있다는 점이 좋았다.

편리했던 vs code의 확장 프로그램 같은 걸 소개해주는 것도 좋았다. Path Autocomplete 바-로 설치해서 잘 사용 중.

 

 

---

✏ Next.js란

Next.js는 SPA와 SSR(Server Side Rendering)의 단점을 해결하기 위해, 이 둘의 장점을 모아 놓은 프레임워크다.

넥스트는 기본적으로 빌드 시에 만든 모든 페이지를 미리 렌더링한다. 사용자에게 빠르게 보이게 되고, HTML이 미리 렌더링되어 SEO에도 좋다. 서버의 데이터를 필요로 하는 페이지에 대해서는 요청 시에 서버 사이드 렌더링을 통해 HTML을 생성하게 된다.

 

또, 기본적으로 웹팩과 바벨을 사용하고 있다. 서버 사이드 렌더링 및 개발에 필요한 설정이 이미 되어 있어 빠르게 개발을 시작할 수 있고, 사용하고 싶은 플러그인이 있다면 추가할 수 있도록 지원된다.

 

파일 기반 내비게이션 기능을 사용한다. React에서는 react-router 라이브러리를 통해 라우팅 설정을 해주어야 하지만, 넥스트는 파일 시스템 기반 라우팅으로 폴더의 경로에 따라 페이지의 경로가 설정되어 편리하다.

 

✏ CNA(Create-Next-App)

리액트의 CRA(Create-React-App)처럼 예제가 포함된 간단한 넥스트 애플리케이션을 만들어 준다.

npx create-next-app

리액트의 CRA의 경우 웹팩과 바벨 등 설정이 숨겨져있었다보니, 넥스트의 CNA도 직접 셋팅하는 것과는 뭔가 다를까 싶어 처음에 CNA를 쓰지 않고 그냥 직접 세팅했다.

근데 진행해보니 넥스트는 CNA를 써도 직접 세팅하는 것과 똑같은 것 같아서, 그냥 삽질(?)하지 말고 간단하게 CNA 쓰면 될 듯...

 

✏ 넥스트의 라우팅

pages폴더를 이용해 경로를 설정할 수 있다.

pages/

ㄴ index.jsx

ㄴ tomato.jsx

 

index.jsx 페이지가 기본적으로 "/" 페이지에서 보여진다.

"/tomato"로 이동하면 tomato.jsx의 코드를 보여준다.

 

주소를 이동할 때는 Link 컴포넌트를 import 하여 사용한다.

페이지 전체를 새로 불러오지 않고 <a>태그의 주소 이동 기능을 수행한다. 또한 브라우저의 History API를 지원한다.

import Link from "next/link";

<Link href="/tomato">
  <p>Move</p>
</Link>

Link 컴포넌트 안에는 꼭 <a>태그를 사용하지 않고 위처럼 <p>태그를 사용해도 되지만

그럴 경우 웹 접근성과 SEO에 좋지 않다고 함.

 

정해지지 않은 주소로 라우팅하기.

pages/

ㄴ index.jsx

ㄴ tomato.jsx

ㄴ /vegetable

    ㄴ [name].jsx

 

파일 이름을 대괄호로 감싸서 만들면 동적 페이지임을 의미하고, 임의의 값을 입력했을 때 이동할 수 있게 된다.

import { useRouter } from "next/router";

const name = () => {
  const router = useRouter();
  console.log(router.query);  // 전달된 주소값을 가져옴
  
  ...
  
  <button type="button" onClick={() => router.push(`/anywhere`)}></button>
  // 라우터 객체 안의 push, replace, back 등의 함수를 이용해 주소를 이동함