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:)