Tailwind를 사용하여 Next.js에서 사이드바 레이아웃 만들기

모든 스타일을 위해 Tailwind CSS로 구동되는 Next.js에서 웹사이트 레이아웃을 만들 것입니다.

주요 목표는 재사용 가능한 레이아웃을 만들고 생성한 페이지 사이를 탐색할 수 있는 방법을 보여주는 것입니다.

결과 쇼케이스:

Next.js 사이드바 프로젝트 설정

먼저 프로젝트를 설정하고 즐겨 사용하는 터미널을 열고 새 Next.js 프로젝트를 시작합니다.

Note: At the time of writing, this is Next 12

npx create-next-app next-sidebar

그런 다음 프로젝트로 이동하여 Tailwind CSS를 추가해 보겠습니다.
Tailwind v3를 추가할 예정입니다. v2를 사용하고 싶다면 installing Tailwind in Next.js 에서 이 글을 확인하세요.

# Install all the dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

# Initialise tailwind
npx tailwindcss init -p

content 옵션에 다음 파일을 추가합니다.

content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],

마지막 단계는 Tailwind 스타일시트를 styles/global.scss 파일에 추가하는 것입니다.

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

그게 다야 우리는 모두 신청서 작성을 시작할 준비가 되었습니다.

모든 페이지 추가

이 기사에서는 세 페이지를 작성합니다.

홈페이지

약

문의

먼저 홈페이지를 변경해 보겠습니다. index.js 파일 안의 모든 것을 제거하고 다음으로 교체할 수 있습니다.

export default function Home() {
  return (
    <div className="flex h-full flex-col justify-center items-center">
      <h1 className="text-4xl mb-5 font-bold">Home</h1>
      <span className="text-7xl">🏡</span>
    </div>
  );
}

about.js 디렉터리 안에 pages라는 새 파일을 추가하고 다음 코드를 추가합니다.

export default function About() {
  return (
    <div className="flex h-full flex-col justify-center items-center">
      <h1 className="text-4xl mb-5 font-bold">About</h1>
      <span className="text-7xl">💬</span>
    </div>
  );
}

그리고 같은 방법으로 contact.js 파일을 추가합니다.

export default function Contact() {
  return (
    <div className="flex h-full flex-col justify-center items-center">
      <h1 className="text-4xl mb-5 font-bold">Contact</h1>
      <span className="text-7xl">📞</span>
    </div>
  );
}

이제 모든 페이지가 있습니다. 이 시점에서 스크립트를 실행하고 기본 페이지를 볼 수 있습니다.

그러나 그들 사이를 탐색할 방법이 없었습니다.

Next.js에 사이드바 레이아웃 추가하기

우리는 Next.js layout 을 사용할 것입니다.

이 레이아웃 파일은 주요 래핑 요소가 될 것이며 각 페이지는 하위 요소로 렌더링됩니다.

먼저 프로젝트에 components 디렉터리를 만들고 내부에 layout.js 파일을 추가합니다.

이 파일의 전역 구조는 다음과 같습니다.

export default function Layout({ children }) {
  return (
    // Todo
  );
}

이제 이 레이아웃 구성 요소를 _app.js 파일에 추가하여 사용할 수 있도록 합니다.

import Layout from '../components/Layout';

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

요소를 정의하는 것으로 시작하겠습니다. 우리는 헤더, 제쳐두고 메인 섹션을 원합니다.

<div className="min-h-screen flex flex-col">
  <header
    className="bg-purple-200 sticky top-0 h-14 flex justify-center items-center font-semibold uppercase"
  >
    Next.js sidebar menu
  </header>
  <div className="flex flex-col md:flex-row flex-1">
    <aside className="bg-fuchsia-100 w-full md:w-60"></aside>
    <main className="flex-1">{children}</main>
  </div>
</div>

이것은 우리에게 이제 우리가 추가해야 하는 모든 기본 설정을 제공할 것입니다. 옆 요소 내부의 실제 메뉴입니다.

이를 위해 추가하려는 페이지 배열을 소개하겠습니다.

const menuItems = [
  {
    href: '/',
    title: 'Homepage',
  },
  {
    href: '/about',
    title: 'About',
  },
  {
    href: '/contact',
    title: 'Contact',
  },
];

이제 우리의 옆에서 이러한 요소를 반복하고 해당 요소에 대한 링크를 추가할 수 있습니다.

<aside className='bg-fuchsia-100 w-full md:w-60'>
  <nav>
    <ul>
      {menuItems.map(({ href, title }) => (
        <li className='m-2' key={title}>
          <Link href={href}>
            <a
              className={`flex p-2 bg-fuchsia-200 rounded hover:bg-fuchsia-400 cursor-pointer`}
            >
              {title}
            </a>
          </Link>
        </li>
      ))}
    </ul>
  </nav>
</aside>

Note: Don't forget to import import Link from 'next/link';

마지막으로 추가하고 싶은 것은 활성 페이지입니다. 사용자가 현재 페이지를 빠르게 볼 수 있도록 약간 다르게 표시되어야 합니다.

이를 위해 라우터를 가져오고 라우터 변수를 정의해 보겠습니다.

import {useRouter} from 'next/router';

export default function Layout({children}) {
  const router = useRouter();

  // Our code
}

그런 다음 href 클래스 내에서 이 href가 활성 페이지인지 확인하는 동적 검사를 추가할 수 있습니다.

${router.asPath === href && 'bg-fuchsia-600 text-white'}

그리고 그게 다야. 이제 Next.js에 동적 사이드바 레이아웃이 생겼습니다!

이것은 다음 프로젝트를 위한 훌륭한 스타터가 될 수 있습니다.

완성된 코드는 GitHub 에서 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 보겠습니다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook 또는