NextJS와 TailwindCSS를 사용하여 간단하고 아름다운 Navbar를 디자인하는 방법

41270 단어 nextjs react programming javascript

확실히 NextJS는 SSR 및 SEO 구성과 같은 추가 기능을 제공하는 것 외에도 우리가 좋아하는 라이브러리의 모든 이점을 제공하여 현재 최고의 React 프레임워크로 자리 잡았습니다.

따라서 이 게시물의 목적은 TailwindCSS의 도움으로 NextJS에서 navbar를 만드는 것이 얼마나 쉽고 직관적일 수 있는지 보여주는 것입니다. 더 복잡한 내용을 위해 Navbar의 요소가 변경되도록 전역 상태를 추가하는 두 번째 게시물을 만들 것입니다.

설정 및 구성

따라서 가장 먼저 필요한 것은 NextCli와 함께 NextJS를 설치하는 것입니다. 저는 Yarn을 선호합니다.

yarn create next-app

애플리케이션을 생성한 후 tailwind와 필요한 종속성을 설치합니다.

yarn add tailwindcss@latest postcss@latest autoprefixer@latest postcss-cli

종속 항목을 설치한 후 App.js에서 몇 가지 수정을 수행하고 새 파일을 만들어야 합니다. 프로젝트의 루트에 위치할 postcss.config.js 파일을 생성하여 시작하겠습니다.

touch postcss.config.js

파일 내부에 다음 구성을 배치합니다.

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

그런 다음 다음 명령을 사용하여 tailwind.config.js 파일을 만듭니다.

npx tailwindcss init --full

이렇게 하면 원하는 대로 수정하고 사용자 지정할 수 있는 tailwind.config.js 파일이 생성됩니다.

이제 Next에서 만든 기본 생성 스타일을 삭제할 수 있으며 스타일 폴더에 main.css 및 tailwind.css라는 두 파일을 만들어야 합니다.

tailwind.css 파일 내부에 이 콘텐츠를 추가해야 합니다.

/* ./styles/tailwind.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

그런 다음 삭제된 파일과 충돌하지 않도록 App.js 및 Index.js 페이지를 수정해야 합니다.

/* ./pages/index.js               */
import Head from 'next/head';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <div>Hello World</div>
    </div>
  );
}

/*   ./styles/_app.js              */
import '../styles/main.css';

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

export default MyApp;

따라서 Next App에서 Tailwind를 사용하려면 먼저 main.css 파일에서 Tailwind 클래스를 컴파일하는 스크립트를 생성해야 합니다. 따라서 package.json에서 일부 스크립트를 추가해야 합니다.

{
  "name": "ourapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "build:css": "postcss styles/tailwind.css -o styles/main.css",
    "build:watch": "postcss styles/tailwind.css -o styles/main.css --watch",
    "prod:build": "NODE_ENV=production yarn run build:css && yarn run build"
  },
  "dependencies": {
    "autoprefixer": "^10.1.0",
    "next": "10.0.4",
    "postcss": "^8.2.1",
    "postcss-cli": "^8.3.1",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "tailwindcss": "^2.0.2"
  }
}

마지막으로 build:css를 실행해야 합니다.

yarn build:css

이제 모든 응용 프로그램에서 Tailwind를 사용할 수 있습니다 :D.

디렉터리 만들기

시작하기 전에 이러한 유형의 애플리케이션에서 선호하는 아키텍처를 보여드리고 싶습니다.

이제 레이아웃에 컴포넌트를 삽입해야 합니다. 이 경우 레이아웃 컨테이너를 생성하지 않으므로 Index.js에 구성 요소를 직접 추가합니다.

/* ./pages/index.js               */
import Head from 'next/head';
import { Navbar } from '../components/Navbar';

export default function Home() {
  return (
    <div>
      <Head>
        <title>Create Next App</title>
        <link rel='icon' href='/favicon.ico' />
      </Head>
      <Navbar />
      <div>Hello World</div>
    </div>
  );
}

구성 요소 시작

/*  ./components/Navbar.jsx     */

export const Navbar = () => {
  return (
    <div>

    </div>
  )
}

17 React 버전부터는 기능 구성 요소에서 반응을 가져올 필요가 없습니다.

이 경우 플렉스가 될 그리드, 패딩 및 배경색을 정의하는 것으로 시작하겠습니다.

/*  ./components/Navbar.jsx     */

export const Navbar = () => {
  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-300 p-3 '></nav>
    </>
  );
};

Next는 SPA 내부의 리디렉션을 위한 아름답고 유용한 도구 링크를 제공하므로 이 경우 로고에 사용하고 응용 프로그램의 "홈"또는 기본 보기로 리디렉션합니다.

/*  ./components/Navbar.jsx     */
import Link from 'next/link';

export const Navbar = () => {
  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-300 p-3 '>
        <Link href='/'>
          <a className='inline-flex items-center p-2 mr-4 '>
            <svg
              viewBox='0 0 24 24'
              xmlns='http://www.w3.org/2000/svg'
              className='fill-current text-white h-8 w-8 mr-2'
            >
              <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
            </svg>
            <span className='text-xl text-white font-bold uppercase tracking-wide'>
              TalwindCSS
            </span>
          </a>
        </Link>
      </nav>
    </>
  );
};

지금은 간단한 보기가 있습니다. 이제 스마트폰과 태블릿에서 볼 수 있는 햄버거 메뉴 추가를 진행하겠습니다.

/*  ./components/Navbar.jsx     */
import Link from 'next/link';

export const Navbar = () => {
  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-300 p-3 '>
        <Link href='/'>
          <a className='inline-flex items-center p-2 mr-4 '>
            <svg
              viewBox='0 0 24 24'
              xmlns='http://www.w3.org/2000/svg'
              className='fill-current text-white h-8 w-8 mr-2'
            >
              <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
            </svg>
            <span className='text-xl text-white font-bold uppercase tracking-wide'>
              Talwind CSS
            </span>
          </a>
        </Link>
        <button className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'>
          <svg
            className='w-6 h-6'
            fill='none'
            stroke='currentColor'
            viewBox='0 0 24 24'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth={2}
              d='M4 6h16M4 12h16M4 18h16'
            />
          </svg>
        </button>
      </nav>
    </>
  );
};

훌륭합니다. 이제 컴퓨터에 표시할 보기를 추가하겠습니다.

/*  ./components/Navbar.jsx     */
import Link from 'next/link';

export const Navbar = () => {
  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-400 p-3 '>
        <Link href='/'>
          <a className='inline-flex items-center p-2 mr-4 '>
            <svg
              viewBox='0 0 24 24'
              xmlns='http://www.w3.org/2000/svg'
              className='fill-current text-white h-8 w-8 mr-2'
            >
              <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
            </svg>
            <span className='text-xl text-white font-bold uppercase tracking-wide'>
              Talwind CSS
            </span>
          </a>
        </Link>
        <button className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'>
          <svg
            className='w-6 h-6'
            fill='none'
            stroke='currentColor'
            viewBox='0 0 24 24'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth={2}
              d='M4 6h16M4 12h16M4 18h16'
            />
          </svg>
        </button>
        <div className='hidden w-full lg:inline-flex lg:flex-grow lg:w-auto'>
          <div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start  flex flex-col lg:h-auto'>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white '>
                Home
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                Services
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                About us
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                Contact us
              </a>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
};

이제 데스크톱 보기가 있습니다.

다음으로 햄버거 메뉴에서 클릭 시 메뉴를 보이거나 숨기는 기능이 필요합니다. 이를 위해 useState 후크를 사용하여 상태를 생성하고 버튼을 클릭할 때 버튼에 대한 함수를 생성합니다.

/*  ./components/Navbar.jsx     */
import Link from 'next/link';
import { useState } from 'react';

export const Navbar = () => {
  const [active, setActive] = useState(false);

  const handleClick = () => {
    setActive(!active);
  };

  return (
    <>
      <nav className='flex items-center flex-wrap bg-green-400 p-3 '>
        <Link href='/'>
          <a className='inline-flex items-center p-2 mr-4 '>
            <svg
              viewBox='0 0 24 24'
              xmlns='http://www.w3.org/2000/svg'
              className='fill-current text-white h-8 w-8 mr-2'
            >
              <path d='M12.001 4.8c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624C13.666 10.618 15.027 12 18.001 12c3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C16.337 6.182 14.976 4.8 12.001 4.8zm-6 7.2c-3.2 0-5.2 1.6-6 4.8 1.2-1.6 2.6-2.2 4.2-1.8.913.228 1.565.89 2.288 1.624 1.177 1.194 2.538 2.576 5.512 2.576 3.2 0 5.2-1.6 6-4.8-1.2 1.6-2.6 2.2-4.2 1.8-.913-.228-1.565-.89-2.288-1.624C10.337 13.382 8.976 12 6.001 12z' />
            </svg>
            <span className='text-xl text-white font-bold uppercase tracking-wide'>
              Talwind CSS
            </span>
          </a>
        </Link>
        <button
          className=' inline-flex p-3 hover:bg-green-600 rounded lg:hidden text-white ml-auto hover:text-white outline-none'
          onClick={handleClick}
        >
          <svg
            className='w-6 h-6'
            fill='none'
            stroke='currentColor'
            viewBox='0 0 24 24'
            xmlns='http://www.w3.org/2000/svg'
          >
            <path
              strokeLinecap='round'
              strokeLinejoin='round'
              strokeWidth={2}
              d='M4 6h16M4 12h16M4 18h16'
            />
          </svg>
        </button>
        {/*Note that in this div we will use a ternary operator to decide whether or not to display the content of the div  */}
        <div
          className={`${
            active ? '' : 'hidden'
          }   w-full lg:inline-flex lg:flex-grow lg:w-auto`}
        >
          <div className='lg:inline-flex lg:flex-row lg:ml-auto lg:w-auto w-full lg:items-center items-start  flex flex-col lg:h-auto'>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white '>
                Home
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                Services
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                About us
              </a>
            </Link>
            <Link href='/'>
              <a className='lg:inline-flex lg:w-auto w-full px-3 py-2 rounded text-white font-bold items-center justify-center hover:bg-green-600 hover:text-white'>
                Contact us
              </a>
            </Link>
          </div>
        </div>
      </nav>
    </>
  );
};

그게 다야. 이제 NextJS와 TailwindCSS를 사용하는 beatufil과 간단한 Navbar가 있습니다.

Tailwind 및 Next의 문서를 방문하는 것이 좋습니다.

NextJS
TailwindCSS

둘 다 훌륭한 문서가 포함된 강력한 프레임워크로, 이를 통해 우리는 개발자로서 더 눈에 띄고 매일 개선할 수 있습니다.
이 기사의 두 번째 부분을 곧 작성하고 싶습니다. useContext의 도움으로 사용자 섹션을 추가하고 사용자가 로그인했는지 여부에 따라 탐색 표시줄 보기를 변경합니다.

추가: React를 좋아하고 단순하고 아름다운 아이콘을 찾고 있다면 확실히 HeroIcons를 좋아할 것입니다. 공식 페이지를 공개합니다 :D

HeroIcons

메리 크리스마스, 가족들과 함께 즐겨보세요.

Reference

이 문제에 관하여(NextJS와 TailwindCSS를 사용하여 간단하고 아름다운 Navbar를 디자인하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/andrewespejo/how-to-design-a-simple-and-beautiful-navbar-using-nextjs-and-tailwindcss-26p1

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

PHP5.4.7 stdClass를 Aray로 변환할 때 끊김

ES6의 Set 사용 방법

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다