라우팅 / 404page / Layout / Link / SEO

최종 수정 : 2024-06-01

Next.js 기초와 내장 컴포넌트

Next.js는 단순히 서버 사이드 렌더링만 제공하는 프레임워크가 아니다. 훌륭한 내장 컴포넌트와 함수를 제공하여 성능이 뛰어난 동적 웹 사이트를 쉽게 만들 수 있다.

---

라우팅 시스템

라우팅(Routing) : 어떤 주소에 어떤 페이지를 보여줄지 정하는 것을 의미한다.

 

Next.js는 '파일시스템 기반 라우팅'으로 동작한다.  : 파일의 경로가 주소에 매칭되는 라우팅 방식

 

정적 라우팅(Static Routing)?

어떤 주소에 어떤 페이지를 보여줄지 정하는 것

 

동적 라우팅(Dynamic Routing)?

여러 주소를 하나의 페이지 컴포넌트에서 처리하는 것

 

API 라우팅

 

 

Layout

 

 

<Link> 컴포넌트

Next.js에서는 무조건 a 태그 대신에 Link 컴포넌트를 사용하면 된다. <a> 태그를 사용하면 페이지를 이동할 때 페이지 전체를 다시 로딩하기 때문에 속도가 느리고, 빈 화면이 잠깐 깜빡거림이 생긴다. 그러나 Link 컴포넌트를 쓰면 필요한 데이터만 불러오기 때문에 이동속도도 빨라지고 넘어가는 동작도 부드럽다.

import Link from 'next/link';

export default Page() {
  return <Link href="/">홈페이지로 이동</Link>;
}

 

useRouter() Hook

사용하면 사이트 주소에서 원하는 값을 가져올 수 있다.   

# 쿼리 사용하기

router.query 값을 사용하면 페이지 주소에서 Params 값이나 쿼리스트링 값을 참조할 수 있다.

 

pages/products/[id].js 페이지에서 router.query['id'] 값으로 Params id에 해당하는 값을 가져올 수 있다.

// -- page/products/[id].js --
import { userRouter } from 'next/router';

export default function Product() {
 const router = useRouter();
 const id = router.query['id'];
 
 return <>Product #{id} 페이지</>;
}

 

/search?q=티셔츠와 같은 주소로 들어왔을 때 router.query['q'] 값으로 쿼리스트링 q에 해당하는 값을 가져올 수 있다.

// -- pages/search.js --
import { useRouter } from 'next/router';

export default function Search() {
 const rotuer = useRouter();
 const q = router.query['q'];
 
 return <>{q} 검색 결과</>;
}

 

# 페이지 이동하기

router.push() 함수를 이용하면 코드로 페이지를 이동할 수 있다.

import { useState } from 'react';
import { useRouter } from 'next/router';

export default function SearchForm() {
 const [value, setValue] = useState();
 const router = useRouter();
 
 function handleChange(e) {
  setValue(e.target.value);
 }
 
 function handleSubmit(e) {
  e.preventDefault();
  if (!value) {
   return router.push('/');
  }
  return router.push(`/search?q=${value}`);
 }
 
 return (
  <form onSubmit={handleSubmit}>
   <input name="q" value={value} onChange={handleChange} />
   <button>검색</button>
  </form>
 );
}

 

리다이렉트(redirect)

next.config.js 파일을 수정하면 특정 주소에 대해서 리다이렉트할 주소를 지정할 수 있다.

/** @type {import('next').NextConfig} */
const nextConfig = {
 async redirects() {
  return [
   {
    source: '/products/:id',
    destination: 'items/:id',
    permanent: true,
   },
  };
 },
}

module.exports = nextConfig;

 

# Rewrite

URL 주소가 길어지는 것을 방지할 수 있고, 중요한 정보를 숨길 수 있다.

async rewrites() {
 return [
  {
   source: '/view',
   destination: '/about/me/view',
  },
  {
   source: '/article/:slug',
   destination: '/post/:slug',
  }
 ];
}

---

404 page

# 커스텀 404 페이지

존재하지 않는 주소로 들어올 경우에 Next.js에서는 기본적으로 404 페이지를 보여 줍니다. 내가 원하는 404 페이지를 보여주려면 pages/404.js 파일을 만들고 일반적인 페이지처럼 구현하면 된다.

 

 

---------------

커스텀 App (_app.js)

공통된 layout을 구현할 때 지정할 수 있는 파일 
모든 페이지에 공통적으로 코드를 적용하고 싶다면 커스텀 App 컴포넌트를 수정하면 됩니다.

 

커스텀 Document (_document.js)

공통된 HTML을 지정할 수 있는 파일

react의 기능을 사용할 수 없다. 

 

 

SEO

---

참고 자료

실전에서 바로 쓰는 Next.js (p.49-83)