Introdução
Quando trabalhamos com o Next.js, é comum encontrar alguns problemas técnicos ao longo do caminho. Um desses problemas que pode surgir é a duplicidade da tag viewport. Este artigo tem como objetivo abordar especificamente essa questão, fornecendo uma solução para resolver o problema da duplicidade do viewport em components no Next.js 13.
O Problema
Antes de apresentarmos a solução, é crucial entender primeiro o problema em mãos. Ao utilizar a tag do viewport diretamente no código, como mostrado abaixo:
import './globals.css'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body className={inter.className}>{children}</body>
</html>
)
}
A Solução
Para resolver este problema, precisamos mudar a forma como estamos definindo a viewport. Em vez de colocá-la diretamente no código, devemos especificá-la no metadata.
A solução foi descoberta e documentada em um tópico no StackOverflow.
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
viewport: 'width=device-width, initial-scale=1, maximum-scale=1', // <-- now here
}
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}
Conclusão
No mundo do desenvolvimento de software, muitas vezes nos deparamos com desafios técnicos. Esses desafios podem parecer intimidantes à primeira vista, mas com o poder da comunidade de desenvolvimento e a troca constante de conhecimentos, a solução está frequentemente a apenas um post de distância.
Top comments (2)
Se você achou este artigo útil, por favor, deixe um "like" e considere compartilhá-lo com seus colegas. Se você tiver sugestões, dicas ou outras estratégias deixe um comentário! Sua contribuição pode enriquecer ainda mais a discussão e ser de grande ajuda para outros leitores. Obrigado!
Teria isso em algum lugar da documentação tb? Seria legal botar o link da documentação na postagem:)