Nextjs와 Tailwind-css로 Youtube 클론을 만들어 봅시다 🎉

5170 단어 javascriptbeginnersnextjswebdev
이것은 우리가 구축할 것의 미리보기입니다.



다음은 사이트의 live preview이고 GitHub 저장소의 link입니다. 이 자습서는 시리즈의 일부이며 이 부분에서는 웹 사이트 디자인에만 집중할 것입니다.

설정



1 단계



아직 설정하지 않은 경우 새 Next.js 프로젝트를 생성하여 시작합니다. 가장 일반적인 접근 방식은 Create Next App을 사용하는 것입니다.

npx create-next-app my-project
cd my-project


2 단계



npm을 통해 tailwindcss 및 해당 피어 종속성을 설치한 다음 init 명령을 실행하여 tailwind.config.js 및 postcss.config.js를 모두 생성합니다.

3단계



tailwind.config.js 파일의 모든 템플릿 파일에 대한 경로를 추가합니다.

module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide")],
}


4단계



Tailwind의 각 레이어에 대한 지시문을 ./styles/globals.css 파일에 추가합니다.

@tailwind base;
@tailwind components;
@tailwind utilities;


5단계



상용구 코드를 정리하고 명령을 실행합니다.
npm run dev
어느 시점에서든 위의 단계에서 문제가 발생하면 여기를 참조하십시오doc.

기타 의존성 설치



이제 시작하기 전에 몇 가지 종속성을 다운로드해야 합니다.

    "axios": "^0.27.2",
    "next": "12.2.2",
    "react": "18.2.0",
    "react-avatar": "^5.0.1",
    "react-dom": "18.2.0",
    "react-icons": "^4.4.0",
    "react-loading-skeleton": "^3.1.0",
    "react-player": "^2.10.1",
    "react-tooltip": "^4.2.21",
    "tailwind-scrollbar-hide": "^1.1.7"


이를 package.json 파일에 추가하고 명령을 실행합니다npm install.

구성요소 구조



이제 index.js 파일의 <main> 태그 안에 다음 코드 줄이 있습니다.

    <main>
      <div>
        <Header />
        <div className='grid grid-cols-7 mt-20'>
          <Sidebar />
          <Body  /> 
        </div>     
      </div>
    </main>


루트 디렉터리에는 새 파일 'Sidebar.js'를 만들 구성 요소 폴더가 있습니다.

// Sidebar.js

import {Items} from './Data/Items';

function Sidebar({) {
  return (
    <div className='flex flex-col justify-between  ml-2 mr-2 col-span-1 z-10 shadow-sm md:ml-7 md:mr-0':'hidden'>
      <ul className="flex flex-col justify-between gap-10 fixed overflow-y-scroll h-[95%]">
        {Items && Items.map((item, index) => {
          return (
            <li className='flex items-center text-center gap-4 transition-none p-3 cursor-pointer hover:text-gray-600 md:p-2'
            key={index}
            >
              {item.icon} {' '}<span className='font-semibold pr-4 hidden lg:block'>{item.name}</span>
            </li>
          )
        })}
      </ul>
    </div>
  )
}

export default Sidebar


구성 요소 폴더 안에 'data'라는 새 폴더를 만들고 'Items.js' 파일을 만듭니다.

import {BsHouse, BsCompass, BsController, BsFilm, BsClockHistory, BsCollectionPlay, BsHandThumbsUp, BsLightbulb, BsTrophy, BsGraphUp, BsMusicPlayer, BsGear} from 'react-icons/bs';
export const Items = [
    {
        name: 'Home',
        icon: <BsHouse size={25} />,
    },
    {
        name: 'Explore',
        icon: <BsCompass size={25} />,
    },
    {
        name: "Trending",
        icon: <BsGraphUp size={25} />
    },
    {
        name: "Subscriptions",
        icon: <BsCollectionPlay size={25} />
    },
    {
        name: "Gaming",
        icon: <BsController size={25} />
    },
    {
        name: "Films",
        icon: <BsFilm size={25} />
    },
    {
        name: "History",
        icon: <BsClockHistory size={25} />
    },
    {
        name:"Likes",
        icon: <BsHandThumbsUp size={25}  />
    },
    {
        name: "Learning",
        icon: <BsLightbulb size={25} />
    },
    {
        name: "Sports",
        icon: <BsTrophy size={25} />
    },
    {
        name:"Music",
        icon: <BsMusicPlayer size={25} />
    },
    {
        name: "Settings",
        icon: <BsGear size={25} />
    }
]


이번 편은 여기까지 하겠습니다. 곧 다음 편에서 뵙겠습니다.
MongoDB Docker 컨테이너에 보안을 추가하는 방법
AWS CDK에서 파라미터를 사용하는 방법은 무엇입니까?

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

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