NextJS

Next.js — это среда разработки с открытым исходным кодом, построенная на основе React.js. Это фреймворк на основе React, который имеет различные функции для включения рендеринга на стороне сервера и создания статических веб-сайтов на стороне клиента.

Next.js дает вам лучший опыт разработки со всеми функциями, которые он предоставляет для любых готовых приложений. Такие функции, как гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута, обеспечивают разработчикам беспрепятственный опыт разработки.

TailwindCSS

TailwindCSS — низкоуровневый CSS-фреймворк на основе утилиты, предназначенный для более быстрого и эффективного создания веб-приложений. TailwindCSS настолько популярен в наши дни, потому что он помогает создавать веб-сайты, даже не выходя из ваших HTML-файлов.

Цель этого поста — показать, насколько простым и интуитивно понятным может быть создание адаптивной панели навигации в NextJS с помощью TailwindCSS. Итак, начнем. Прежде чем мы начнем писать код, нам нужно выполнить начальную настройку для tailwind и Nextjs.

Установка и конфигурация

Итак, первое, что нам нужно, это установить NextJS с NextCli, в нашем случае мы предпочитаем использовать npm.

Начните с создания нового проекта Next.js, если у вас его еще нет. Самый распространенный подход — использовать Создать следующее приложение:

npx create-next-app -e with-tailwindcss responsive-navigation

После создания шаблонного кода приступаем к установке Tailwind и зависимостей:

Настройка CSS Tailwind

Для начала устанавливаем Tailwind. Для Tailwind CSS требуется Node.js, поэтому сначала нам нужна совместимая версия узла. После этого мы можем установить Tailwind через npm.

Примечание. Для Tailwind CSS требуется Node.js 12.13.0 или выше.

Установить Tailwind через npm

npm install -D tailwindcss@latest postcss@latest autoprefixer@latest

Создайте свои файлы конфигурации

Чтобы сгенерировать файлы tailwind.config.js и postcss.config.js:

npx tailwindcss init -p

Это создаст минимальный файл tailwind.config.js в корне вашего проекта. Он также создаст файл postcss.config.js, состоящий из файлов tailwindCSS и autoprefixer:

Теперь нам нужно создать Navbar.js в папке компонентов, а затем вызвать этот файл непосредственно в Index.js.

import { Navbar } from "../components/Navbar"; 
export default function Home() { 
    return ( 
      <div> 
       <Navbar /> 
         <div>Responsive Navigations</div> 
      </div> 
     );
}

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

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'> Responsive Navigation </span>
      </a> 
     </Link> 
       <button className=' inline-flex p-3 hover:bg-gray-900 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-gray-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-gray-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-gray-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-gray-600 hover:text-white'> Contact 
          </a> 
        </Link> 
      </div> 
     </div> 
    </nav> 
  </> 
 ); 
};

Наконец, нам нужна функция, которая скрывает и показывает меню, когда мы нажимаем на гамбургер-меню. Для этого нам нужна возможность управления состоянием, используя хук react useState.

Есть точки останова, которые позволяют панели навигации изменять размеры экрана. Когда он достигает небольших размеров экрана, таких как мобильные представления, меню гамбургера будет активировано. Однако при просмотре на больших экранах, таких как планшеты и настольные компьютеры, активируется встроенная панель навигации по умолчанию.

const [active, setActive] = useState(false); 
const handleClick = () => { setActive(!active); };
<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>

Заключение

Это все. Теперь мы создали простую адаптивную навигацию по меню с помощью NextJS и TailwindCSS.

Если вы хотите узнать больше о TailwindCSS и NextJS, подпишитесь на официальные сайты TailwindCSS и NextJS. Обе эти технологии настолько эффективны и содержат хорошо написанную документацию, что разработчики могут создавать более интересные продукты с помощью меньше времени.

Полный код Гитхаб

Первоначально опубликовано на https://letmefail.com 1 ноября 2021 г.