Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] No meu projeto em Nextjs usando typescript, o layout.tsx não esta funcionando em outras paginas so na page.tsx (principal)

por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

O código que coloquei no console.log() para mostrar o caminho da página só aparece no arquivo "pages.tsx" (src/app/pages.tsx) e os demais que estão em (src/page/Login) não estão aparecendo no console. Independentemente do caminho que eu tomo, ele não captura o que o layout está definindo

src -app/ -page.tsx -layout.tsx -pages/ -Login/ -index.tsx -Perfil/ -index.tsx

Código layout.tsx:

'use client';

import { Inter } from 'next/font/google';
import { usePathname } from 'next/navigation';
import './globals.css';
import { checkIsPublicRoute } from '@/functions/check-is-public-route';

const inter = Inter({ subsets: ['latin'] })

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {

  const pathname = usePathname();
  console.log("caminho:", pathname)
  const isPublicPage = checkIsPublicRoute(pathname!)
  console.log(isPublicPage)

  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  )
}

Quando navego entre as páginas que criei não aparece nada no final mas na página principal da próxima aparece:

caminho: /
layout.tsx:19 false
layout.tsx:17 caminho: /
layout.tsx:19 false
layout.tsx:17 caminho: /
layout.tsx:19 false
layout.tsx:17 caminho: /
layout.tsx:19 false
3 respostas
por Estudante
| 568.5k xp | 1338 posts

Olá

Uma coisa que eu percebi é que você está usando usePathname do 'next/navigation'. Pode ser que nas outras páginas esse hook não esteja sendo chamado ou utilizado corretamente, por isso não está mostrando o caminho no console.

Dá uma olhada nas páginas em src/pages/Login e src/pages/Perfil. Certifica-se de que você está importando e usando o RootLayout corretamente nessas páginas? Parece que algo ali não está acionando o usePathname e, consequentemente, não está mostrando os logs esperados.

Se possível, dá uma verificada se o RootLayout está sendo chamado em todas as páginas onde você quer que o layout funcione. Se continuar com problemas, talvez valha a pena revisar como os componentes estão sendo renderizados e se o usePathname está sendo utilizado corretamente em todas as páginas. Boa sorte!

por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Nas outras paginas criadas por mim eu nao chamei os o usePathname, pq quando chamo aparece um erro.

src/app/page.tsx (pagina principal do next)

"use client"

import Link from 'next/link';
import RootLayout from './layout';
import { KcToken } from '@/pages/api/kc-authenticated'

export default function Home() {

  return (
    <RootLayout>
      <div>
        <KcToken />
        <h1>Home Page com build</h1>
        <Link href={"/Perfil"}>Seu Perfil</Link>
      </div>
    </RootLayout>
  );
}

src/pages/Login/index.tsx

import Link from 'next/link';

export default function Login() {

  return (
    <div>
      <h1>Login:</h1>
      <Link href="/Login">Login Aquin</Link>
    </div>
  )
}

Quando eu coloco o RootLayout no mesmo jeito que ta na pagina principal da esse erro:

Unhandled Runtime Error
Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching <html> in <div>.

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack
html
RootLayout
Perfil
Call Stack
throwOnHydrationMismatch

src/pages/Perfil/index.tsx fica assim:

import RootLayout from "@/app/layout"
import Link from "next/link"

export default function Perfil() {
  return (
    <RootLayout>
      <main>
        <div><p>Logado</p></div>
      </main>
    </RootLayout>
  )
}
solução!
por Samuel Maximo De Araujo Neto
| 19.1k xp | 41 posts

Resolvido: O layout.tsx so funciona para o APP route e nao para pages route. Ou seja estava errado desdo principio. =)

Para usar o Pages route use: __app.tsx