В сфере веб-разработки первостепенное значение имеет опережение. Ни для кого не секрет, что пользовательский опыт играет ключевую роль в привлечении и удержании посетителей на веб-сайте. По мере развития технологий разработчики постоянно изучают инновационные способы улучшения общего опыта просмотра. Одной из таких замечательных функций, которая приобрела значительную популярность в последние годы, является «Темный режим».
Темный режим с его гладким и визуально привлекательным дизайном стал предпочтительным выбором для многих пользователей. Он не только снижает нагрузку на глаза, особенно в условиях низкой освещенности, но и экономит заряд аккумулятора устройства, что делает его привлекательным вариантом для мобильных пользователей. В динамичном мире веб-разработки фреймворки и библиотеки постоянно развиваются, чтобы идти в ногу с этими меняющимися тенденциями, и Next.js, известный фреймворк React, вышел на новый уровень со своим последним выпуском Next.js 13, который приносит Поддержка темного режима на первом плане.
В этом сообщении блога мы рассмотрим захватывающие новые функции и возможности, представленные Next.js 13, с особым акцентом на реализацию темного режима. Мы углубимся в технические аспекты включения темного режима в проекте Next.js, включая необходимые фрагменты кода и параметры конфигурации. Независимо от того, являетесь ли вы опытным разработчиком Next.js или только начинаете, эта статья призвана дать вам всестороннее представление о реализации темного режима в Next.js 13, что позволит вам создавать более захватывающие и удобные веб-приложения.
Итак, без лишних слов, давайте погрузимся в мир Next.js 13 и раскроем секреты реализации Dark Mode для вашего следующего проекта. Приготовьтесь вывести ваш пользовательский опыт на совершенно новый уровень!
Настройка проекта:
Начните с настройки вашего проекта Next.js 13; следуйте приведенным ниже инструкциям по установке. ПРИМЕЧАНИЕ. Убедитесь, что вы согласны с параметрами "Маршрутизатор приложений" и "Tailwind CSS", все остальное зависит от вас.
Начало работы: установка | Next.js (nextjs.org).
Важные части файловой структуры должны выглядеть следующим образом:
- src (If selected during installation) - app - globals.css - layout.tsx (will be .jsx if TS is not selected) - page.tsx
Реализация темного режима
- Установите следующие зависимости:
npm i next-themes npm i react-icons
2. Создайте папку components в каталоге приложения; затем создайте два файла с именами «DarkMode.tsx» и «providers.tsx» (при использовании машинописного текста). Теперь структура файла должна выглядеть так:
- src (If selected during installation) - app - components - DarkMode.tsx - providers.tsx - globals.css - layout.tsx (will be .jsx if TS is not selected) - page.tsx
3. Скопируйте этот код в «DarkMode.tsx»:
"use client" import { useState, useEffect } from 'react' import { useTheme } from 'next-themes' import { FaMoon, FaSun } from 'react-icons/fa' const DarkModeButton = () => { const [mounted, setMounted] = useState(false) const { theme, setTheme } = useTheme() useEffect(() => { setMounted(true) }, []) if (!mounted) { return null } return ( <button className='absolute right-4 bottom-4' onClick={e => theme === 'dark' ? setTheme('light') : setTheme('dark')}> {theme === 'dark' ? <FaMoon /> : <FaSun />} </button> ) } export default DarkModeButton
4. Скопируйте этот код в «providers.tsx»:
'use client' import { ThemeProvider } from 'next-themes' export function Providers({ children } : {children: React.ReactNode}) { return <ThemeProvider>{children}</ThemeProvider> }
5. Оберните реквизит jsx children в корень файла layout.tsx следующим образом.
import type { Metadata } from 'next' import './globals.css' import { Providers } from './components/providers' export const metadata: Metadata = { title: 'Template', } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( <html lang="en" suppressHydrationWarning> <body> {/* Wrapping the children prop */} <Providers>{children}</Providers> </body> </html> ) }
6. Очистите файл globals.css, чтобы он выглядел примерно так:
@tailwind base; @tailwind components; @tailwind utilities;
6. Наконец, скопируйте этот код в «page.tsx»:
import DarkModeButton from "./components/DarkMode"; export default function Home() { return ( <> <h1 className="text-4xl w-full bg-blue-700 p-3 flex justify-center"> Template </h1> <DarkModeButton /> </> ) }
И выполните код:
npm run dev
Компонент ‹DarkModeButton /› теперь можно добавить в любой файл 'page.tsx', чтобы обеспечить функциональность темного режима на любой веб-странице вашего веб-сайта. !