Oi Marcello, tudo bem?

Para utilizar o tema escuro em suas aplicações Next.js, você pode utilizar a biblioteca "next-themes". Com ela, você pode facilmente alternar entre os temas claro e escuro em sua aplicação.

Para começar, você precisa instalar a biblioteca em seu projeto. Você pode fazer isso executando o seguinte comando no terminal:

npm install next-themes

Após a instalação, você precisa envolver o componente raiz de sua aplicação com o componente "ThemeProvider" fornecido pela biblioteca. Por exemplo:

import { ThemeProvider } from 'next-themes'

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider defaultTheme="light">
      <Component {...pageProps} />
    </ThemeProvider>
  )
}

export default MyApp

Observe que o "defaultTheme" é definido como "light", indicando que o tema padrão é o claro. Você pode alterar isso para "dark" se quiser que o tema padrão seja o escuro.

Agora, para alternar entre os temas, você pode usar o hook "useTheme" fornecido pela biblioteca. Por exemplo:

import { useTheme } from 'next-themes'

function MyComponent() {
  const { theme, setTheme } = useTheme()

  return (
    <div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        Alternar tema
      </button>
    </div>
  )
}

Observe que o hook "useTheme" retorna um objeto com duas propriedades: "theme", que indica o tema atual, e "setTheme", que é uma função que você pode chamar para alternar entre os temas. É uma maneira de fazer.

Um abraço e bons estudos.