В сфере веб-разработки первостепенное значение имеет опережение. Ни для кого не секрет, что пользовательский опыт играет ключевую роль в привлечении и удержании посетителей на веб-сайте. По мере развития технологий разработчики постоянно изучают инновационные способы улучшения общего опыта просмотра. Одной из таких замечательных функций, которая приобрела значительную популярность в последние годы, является «Темный режим».

Темный режим с его гладким и визуально привлекательным дизайном стал предпочтительным выбором для многих пользователей. Он не только снижает нагрузку на глаза, особенно в условиях низкой освещенности, но и экономит заряд аккумулятора устройства, что делает его привлекательным вариантом для мобильных пользователей. В динамичном мире веб-разработки фреймворки и библиотеки постоянно развиваются, чтобы идти в ногу с этими меняющимися тенденциями, и 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

Реализация темного режима

  1. Установите следующие зависимости:
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', чтобы обеспечить функциональность темного режима на любой веб-странице вашего веб-сайта. !