Давайте создадим клон Youtube с помощью Nextjs и Tailwind-css🎉

Вот предварительный просмотр того, что мы собираемся создать

Вот живой предварительный просмотр сайта и ссылка на репозиторий GitHub. Это руководство является частью серии, и в этой части мы сосредоточимся только на дизайне сайта.

Содержание

УСТАНОВКА
ШАГ 1
ШАГ 2
ШАГ 3
ШАГ 4
ШАГ 5
Установка других зависимостей
Структура компонента

УСТАНОВКА

ШАГ 1

Начните с создания нового проекта Next.js, если он у вас еще не создан. Наиболее распространенный подход — использовать Create Next App.

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

Войдите в полноэкранный режим Выход из полноэкранного режима

ШАГ 2

Установите tailwindcss и аналогичные зависимости через npm, а затем выполните команду 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 для каждого из слоев Tailwind в файл ./styles/globals.css.

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

Войти в полноэкранный режим Выйти из полноэкранного режима

ШАГ 5

Очистите шаблонный код и выполните команду

npm run dev

Если вы в какой-то момент застряли на описанных выше шагах, обратитесь к этому документу.

Установка других зависимостей

Теперь, прежде чем мы начнем, нам нужно загрузить несколько зависимостей.

    "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.

Структура компонента

Теперь, внутри тега <main> файла index.js, у нас будут эти строки кода:

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

Вход в полноэкранный режим Выйти из полноэкранного режима

В корневом каталоге будет находиться папка components, в которой мы создадим новый файл ‘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

Войти в полноэкранный режим Выйти из полноэкранного режима

Внутри папки components мы создадим новую папку ‘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} />
    }
]

Вход в полноэкранный режим Выйти из полноэкранного режима

На этом мы закончим эту часть, до скорой встречи в следующей части.