DEV Community

Rodrigo Oler
Rodrigo Oler

Posted on

Resolvendo a duplicidade do viewport no Next.js 13.4

nextjs

  1. Introdução
  2. O Problema
  3. A Solução
  4. Conclusão

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


Enter fullscreen mode Exit fullscreen mode

warning


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


Enter fullscreen mode Exit fullscreen mode

success


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)

Collapse
 
oler profile image
Rodrigo Oler

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!

Collapse
 
thebergamo profile image
Marcos Bérgamo

Teria isso em algum lugar da documentação tb? Seria legal botar o link da documentação na postagem:)