Next.js의 페이지 라우팅

pages

1. /pages 폴더 안에 작성한 폴더와 파일이 url 경로가 된다.

1-1. /pages/index.js 파일에 작성한 컴포넌트는 / 홈 페이지가 된다.

1-2. /pages 하위에 items 폴더를 만들고 파일을 만들면 경로는 /items/파일명이 된다.

1-3. 하나의 컴포넌트로 상품마다 바뀌는 Path Variable을 나타내고 싶으면 파일명을 []로 감싸면 된다.

/items/1, /items/2, /items/3 ... /items/:id 페이지들을 [id].js에 작성한 컴포넌트가 렌더링되어 보여진다.

1-3. /pages/404.js 파일로 잘 못된 경로로 접속했을 때의 http 에러 코드 404 not found 페이지를 만들 수 있다.

Public

2. /public 폴더 안에 넣은 파일은 url 경로로 불러올 수 있다.
   
   

Link

3. <a> 태그 대신 next/link 패키지의 <Link> 를 사용한다.

• <a> 태그 : 페이지를 이동할 때 페이지 전체를 다시 로딩
  • 속도가 느리다
  • 빈 화면이 잠깐 보이면서 깜빡거림이 생긴다
• <Link> 컴포넌트 : Next.js에서 내부 최적화를 통해 빠르고 깜빡임 없이 부드러운 페이지 전환 가능

import Link from 'next/link';

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

useRouter()

4. router.query url에서 Params 값이나 Query String 값을 참조할 수 있다.

// pages/product/[id].js

import { useRouter } from 'next/router'

export default function Product() {
  const router = useRouter();
  const { id } = router.query;

  return <>Product {id} 페이지</>;
}

/searches?q=립스틱 와 같은 주소로 들어왔을 때 query string q에 해당하는 값도 가져올 수 있다.

pages/searches.js

import { useRouter } from 'next/router'

export default function Product() {
  const router = useRouter();
  const { q } = router.query;

  return <> 검색 결과 : {q} </>;
}

4-1. 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>
  );
}

참고 : 🔗 코드잇 Next.js로 웹사이트 만들기