Next.js 알아보기

Next.js의 개념에 대해 알아보는 글 

최근에 알게 된 정보들을 정리하는 느낌으로 작성해보려 한다 

 

Next.js는 vercel 팀에서 만든  React Framework이다. 

 

서버사이드 렌더링을 함으로 얻는 이득 ? 

 

CSR의 단점

• CSR의 경우 모든 JS 파일을 로드한 이후에 사용자가 웹을 보게 된다 → 즉 JS 파일을 로드하기 전 까지 사용자는 많은 시간을 대기해야 한다 

👉 서버사이드 렌더링 즉 서버에서 자바스크립트를 로딩하고 유저가 볼 수 있는 html (미리 데이터가 렌더링된 페이지)을 볼 수 있기 때문에 유저가 페이지를 확인하는 시간을 단축 시킬 수 있다.

 

CSR의 단점

• SEO - CSR의 경우 자바스크립트가 로드 되지 않은 경우 웹페이지를 볼 수 없다 -> 비어있는 (index.html)
• 구글 검색엔진의 경우 자바스크립트가 로드되지 않은 페이지를 검색엔진으로 스캔하여 검색 엔진에 페이지가 걸리지 않는다.

👉 서버사이드 렌더링을 함으로써 검색엔진이 html을 읽을 수 있기 때문에 검색엔진에 페이지가 걸린다. ( meta 태그를 추가하여 seo를 용이하게 할 수 있다. )

 

다만 SSR은 서버의 부하가 있을 수 있고 페이지 이동 시 깜박이는 단점이 있다.

 

설치

 

npx create-next-app@latest --ts
# or
yarn create next-app --typescript
# or
pnpm create next-app --ts

 

Next.js 에서 제공하는 기능

페이지 기반 라우팅 시스템

next.js는 pre-rendering 뿐 아니라 페이지 기반 라우팅 시스템도 제공한다. 프로젝트의 /pages 폴더에서 라우팅하려는 컴포넌트를 export하면 폴더명 자체가 페이지 route가 된다.

 

→ 루트 페이지인 index.tsx외 notice, about 폴더 등이 Route가 된다 ex) /about , /notice

 

정적 라우팅

정적 라우팅은 지정된 URL로 이동하는 방법이다

react-router-dom과 같이 Next 에서도 Link를 사용하여 라우트 이동을 할 수 있다.

 

import Link from 'next/link';

const Home = () => {
  return (
    <div>
	  <Link href="/notice">
	    <a>notice 페이지로 이동</a>
	  </Link>
    </div>
  );
};

export default Home;

 

Link는 a 태그와 마찬가지로 href 속성으로 이동 할 수 있다.

Link로 감싼 엘리먼트를 클릭하게 되면 지정한 경로로 이동한다

• 또 링크는 브라우저의 History API를 지원하기 때문에 뒤로가기를 클릭하면 이전에 렌더링한 페이지로 이동하게 된다

 

동적 라우팅

미리 지정해놓은 라우팅 외의 동적으로 라우팅 하는 방법도 존재한다

아래와 같이 [ ]에 값을 지정하면 해당 값이 query가 되고 해당 query로 라우팅이 가능해진다

 

 

Notice라는 폴더 하위에 index.tsx와 [id].tsx 두개의 파일을 생성했다 index.tsx는 Notice의 Home이 될 것이고 [id].tsx는 쿼리로 접근하는 페이지가 될 것 이다.

 

// [id].tsx

import { useRouter } from 'next/router';

const Notice = () => {
  const router = useRouter();

  return (
    <div>
      <h1>Notice {router.query.id}</h1>
    </div>
  );
};

export default Notice;

 

localhost:3000/Notice/100 으로 접근했을 경우 아래와 같은 페이지가 보여진다.

 

 

라우터 객체

이번에는 페이지의 경로 정보를 가지는 라우터 객체 useRouter를 알아보자.

 

import { useRouter } from 'next/router';

const Home = () => {
	const router = useRouter();

	const onMoveToAboutPage = () => {
		router.push('/About');
	};

	return <div onClick={onMoveToAboutPage}>AboutPage로 이동</div>;
};

export default Home;

 

위 처럼 이벤트 핸들러를 통해 라우팅을 하고자 한다면 useRouter 객체를 사용하면 되겠다

 

자주 사용되는 메소드

• router.push - 이동하고자 하는 url이 스택에 쌓여 이동하게 된다
• router.replace - 이동하고자 하는 url이 스택에 쌓이지 않고 이동하게 된다
• router.pathname - 현재 열려있는 페이지의 pathname
• router.query - 현재 열려있는 페이지의 query

 

Next.js, SSR의 개념과 라우트에 대해 간단하게 알아 봤다 주요한 개념들이 많이 있기 때문에 다음글에서 천천히 더 알아보려 한다.