Next.js 내장 컴포넌트

JangGwon·2023년 3월 30일

1. 라우팅 시스템

기존 리액트에서는 react router, wouter와 같은 라이브러리에 도움을 받아 라우트 코드를 직접 작성하여 라우팅을 구현하지만, Next.js는 라이브러리 없이 파일 시스템 기반의 라우팅 시스템을 이용한다.
파일 시스템 기반 라우팅은 페이지를 파일 시스템의 경로와 매핑 즉, pages라는 이름의 폴더 안에 파일을 만들면 폴더 구조를 알아서 라우팅한다.

pages 
  - index.js         // http://localhost:3000/
  - abc.js			 // http://localhost:3000/abc
  - folder/
      - temp.js	    // http://localhost:3000/folder/temp.js
      - [slug].js	// http://localhost:3000/folder/[slug]     <- 동적 라우팅 은 이렇게 대괄호([])를 써서 하면 된다.

경로매개변수는

페이지에서 경로 매개변수 사용가능

function temp({params})

컴포넌트에서 경로 매개변수 사용가능

페이지 밖에서는 getServerSideProps나 getStaticProps 함수를 사용하지 못함. 하지만 useRouter 훅을 통해서 query 매개변수를 가져오면 해결 가능

import {useRouter} from 'next/router';

function temp()
{
  const { query } = useRouter();
  return <p> {query.name} </p>							// 해당 컴포넌트의 이름을 반환함
}

클라이언트에서의 내비게이션

페이지들을 연결할 때 Html의 표준 <a> 태그를 사용하여 연결할 수 있지만, Link 컴포넌트를 통해 서로 다른 라우트간의 이동을 최적화 할 수 있다.
Link가 <a>태그와 다른점은 연결된 페이지를 미리 읽어온다는점(preload)

import Link from 'next/link';

function temp()
{
    return (
      <div>
      	<Link href ='/home'>home</Link>
      	<Link href ='/about' preload = {false}>about</Link>		
		// preloaㅇ = false 속성을 추가하여 페이지 미리 불러오기 끌 수 있음
	  </div>
	)
}

rounter.push 메서드

router.push 메서드를 이용해서 다른 페이지로 이동 가능하다, 단, Link 컴포넌트와 달리 연결된 페이지 프리로드 지원 X

import {useRouter} from 'next/router';

function Mypage()
{
	const router = useRouter();
   	function f()						// f함수 호출시 home으로 이동 
    {
    	router.push('/home');				
    }
}

2. 정적 자원 제공

자동 이미지 최적화

기존의 표준 HTML태그인 <img> 사용할 때, 누적 레이아웃 이동(CLS)현상을 해결하기 위해서는 외부 도구를 사용하여 이미지를 최적화 하거나, srcset 속성값을 지정해서 화면 크기별로 이미지를 조정해야하는달리, Next.js에서 제공되는 Image 컴포넌트는 이미지를 자동적으로 최적화 시킬 수 있다.

Image 컴포넌트

이미지 요청이 있을 때만 자동 이미지 최적화를 적용함, 이미지 요청이없다면 최적화 진행 X
브라우저에 맞는 WebP, png, jpeg등의 포맷을 제공함
필요한 경우 이미지 크기를 조절해서 이미지 용량을 줄임

3. 메타데이터

메타데이터란 ?

메타데이터란 한마디로 '데이터에 대한 정보'로 NextJs에서의 메타데이터는 웹 페이지의 정보를 설명하는 데이터를 말합니다. 메타데이터 구성으로는 웹 페이지의 제목, 설명, 작성자, 키워드, 이미지 등을 포함시킬 수 있으며, 메타데이터를 추가한다면 크롤러가 웹을 잘 분석하고 인덱싱 도움을 줌. 즉, 검색 엔진 최적화(SEO)를 개선효과를 볼 수 있음.

Head

Next.js에서는 Head컴포넌트를 통해 메타데이터를 쉽게 작성할 수 있음.


import Head from 'next/head';

function TempPage()
{
  return (
    <>
    	<Head>
    		<title>This is TempPage</title>
    		 <meta property="description" content="this is temppage"/>
    	</Head>
    	<div>
    		<p>This is TempPage</p> 
    	</div>
    </>
  );
}