[Next.js] Router 만들기

이번 글에서는 Router를 만들어 보려고 합니다. 

이전에 만들어둔 프로젝트의 루트 디렉터리에 components 폴더를 하나 만들고, 그 안에 NavBars.js 파일을 생성합니다.

export default function NavBars() {
  return <nav>
    <a href='/'>Home</a>
    <a href='/about'>About</a>
  </nav>;
}

그리고 about.js / index.js 에 내용을 각각 바꾸어줍니다. 

import NavBars from '../components/NavBars'

export default function AboutPage() {
    return (
        <div>
            <NavBars />
            <h1>About</h1>
        </div>
    )
}

import NavBars from '../components/NavBars'
import { useState } from 'react';

export default function Home() {
    return (
        <div>
            <NavBars />
            <h1>Home</h1>
        </div>
    )
}

여기서 특이한 점 두가지가 있습니다. 

1. React의 문법을 그대로 사용합니다. 

import / export default 는 react 프로젝트에서도 사용한 것이지만 여기서도 사용할 수 있습니다. export default 를 선언하면 다른 클래스에서 해당 함수를 참조할 수 있는 접근 제어자의 기능이 추가됩니다. (java 의 public)

2. function의 이름을 마음대로

이전에 작성한 react 프로젝트는 about.js 이면 문제가 생겼습니다. 함수 또는 클래스의 명의 시작을 대문자로 하여

(ex: About.js) == export default function About() {

으로 시작을 하는 경우가 많았습니다. 즉, 생성자 함수를 만들어야 했습니다.

 

하지만 next js 는 export 되는 함수의 이름을 마음대로 정할 수 있습니다. 

 

다시 라우터의 내용으로 돌아와 NavBars 의 내용을 확인해보겠습니다. 내부의 Anchor (a) 태그를 사용하여 리다이렉팅을 진행하고 있는데, 이와 같이 앵커 태그를 사용하게 되면 서버사이드렌더링이 진행되어 새로고침을 하는 것과 같은 내용을 보여주게 됩니다. 즉 about 페이지에서 about 페이지로 넘어가는데 다시 렌더링을 하게됩니다. 

그렇기에 next js 에서는 앵커 태그 대신 Link 태그를 사용하도록 권고하고 있습니다. 

import Link from 'next/link';

export default function NavBars() {
    return <nav>
        <Link style={{color: "red"}} href="/">
            Home
            </Link>
        <Link href="/about">About</Link>
    </nav>;
}

위와 같이 코드를 작성하게 되면 클라이언트 렌더링이 되어 새로고침을 하지 않고 즉시 페이지 이동이 되는 것을 확인하실 수 있습니다.

 

이제 본격적으로 라우터를 붙여 최종적으로 핸들링 할 수 있는 router를 붙여보도록 하겠습니다.

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavBars() {
    const router = useRouter();
    console.log(router);

    return <nav>
        <Link style={{color: "red"}} href="/">
            <a style={{ color: router.pathname === '/' ? 'red' : 'blue'}}>Home</a>
            </Link>
        <Link href="/about"><a>About</a></Link>
    </nav>;
}

router 객체는 다양한 내용을 가지고 있습니다. 이 중 pathname 은 현재 url이 어디를 위치하고 있는지 표시해주는 내용으로 a 태그 내에 스타일을 적용하여 rootpath 인 경우 (index.js) 빨간색을, 그렇지 않은 경우 파란색을 보여주는 소스입니다. 참고로 Link 태그 안의 a 태그는 자동으로 생성됩니다.

Github: https://github.com/jyp90/nextjs-intro/commit/c29a74ead8709a64c76d3dde5d20ba771e5384b4

Add NavBar · jyp90/nextjs-intro@c29a74e