[노마드코더]Next.js #2 NavBar with Router

Router

useRtouer 훅을 사용해서 현재 페이지가 어디인지를 확인하여 스타일을 먹여줄 수 있는 NavBar를 만들어주자. 스타일은 next.js가 내장하고 있는 styled-jsx를 써보자. 강의와는 좀 다르지만 나는 classnames 라이브러리까지 사용해주었다.

import Link from 'next/link';
import { useRouter } from 'next/router';
import React from 'react';
import cn from 'classnames';

export default function NavBar() {
  const router = useRouter();

  return (
    <div className='NavBar'>
      <Link href='/'>
        <a className={cn('linkItem', { active: router.pathname === '/' })}>Home</a>
      </Link>
      <Link href='/about'>
        <a className={cn('linkItem', { active: router.pathname === '/about' })}>About</a>
      </Link>
      <style jsx>{`
        .NavBar {
          display: flex;
          justify-content: flex-start;
        }
        .linkItem {
          padding-right: 20px;
        }
        .active {
          color: red;
        }
      `}</style>
    </div>
  );
}

_app.js를 거대하게 만들지 말자

google analytics 등 많은 것들을 넣어줄 수 있다.
레이아웃 컴포넌트를 사용해서 최대한 복잡도를 줄여주자.

componentns/Layout.jsx

import React from 'react';
import NavBar from './NavBar';

export default function Layout({ children }) {
  return (
    <div>
      <NavBar />
      <div>
        {children}
      </div>
    </div>
  );
}

pages/_app.jsx

import Layout from '../components/Layout';
import '../styles/globals.css';

function MyApp({ Component, pageProps }) {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  );
}

export default MyApp;