Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Converter _app.tsx do meu tamplate para Next 13 App Router

por AUGUSTO DOS SANTOS LEAL
| 25k xp | 2 posts

Eu estou usando um tamplate pronto onde o o _app.tsx dele é assim: 

mport React from 'react'
import Script from 'next/script'
import type { AppProps } from 'next/app'
import type { ReactElement, ReactNode } from 'react'
import type { NextPage } from 'next'
import Head from 'next/head'
import { store } from '../stores/store'
import { Provider } from 'react-redux'
import '../css/main.css'

export type NextPageWithLayout<P = Record<string, unknown>, IP = P> = NextPage<P, IP> & {
  getLayout?: (page: ReactElement) => ReactNode
}

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout
}

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  // Use the layout defined at the page level, if available
  const getLayout = Component.getLayout || ((page) => page)

  const title = `Admin One React Tailwind free`

  const description = 'Admin One - free React Next Tailwind dashboard with TypeScript and dark mode'

  const url = 'https://justboil.github.io/admin-one-react-tailwind/'

  const image = `https://static.justboil.me/templates/one/repo-tailwind-react.png`

  const imageWidth = '1920'

  const imageHeight = '960'

  return (
    <Provider store={store}>
      {getLayout(
        <>
          <Head>
            <meta name="description" content={description} />

            <meta property="og:url" content={url} />
            <meta property="og:site_name" content="JustBoil.me" />
            <meta property="og:title" content={title} />
            <meta property="og:description" content={description} />
            <meta property="og:image" content={image} />
            <meta property="og:image:type" content="image/png" />
            <meta property="og:image:width" content={imageWidth} />
            <meta property="og:image:height" content={imageHeight} />

            <meta property="twitter:card" content="summary_large_image" />
            <meta property="twitter:title" content={title} />
            <meta property="twitter:description" content={description} />
            <meta property="twitter:image:src" content={image} />
            <meta property="twitter:image:width" content={imageWidth} />
            <meta property="twitter:image:height" content={imageHeight} />

            <link rel="icon" href="/admin-one-react-tailwind/favicon.png" />
          </Head>

          <Script
            src="https://www.googletagmanager.com/gtag/js?id=UA-130795909-1"
            strategy="afterInteractive"
          />

          <Script id="google-analytics" strategy="afterInteractive">
            {`
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag('js', new Date());
              gtag('config', 'UA-130795909-1');
            `}
          </Script>

          <Component {...pageProps} />
        </>
      )}
    </Provider>
  )
}

export default MyApp

Mas meu projeto é Next 13, ou seja nao tem o _app e eu uso page.tsx, layout.tsx etc... Onde eu posso colocar todo esse codigo para funcionar no meu projeto?

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

essa foto é da pasta "app" já.

Eu quero que meus arquivos css tambem (ja que é um tamplate) seja importado globalmente para minhas paginas tambem coisas assim e funcione as funcionalidades que no _app tem)

1 resposta
solução!
por Lorena Garcia
| 9898.1k xp | 14876 posts
Alura Scuba Team Suporte Educacional

Oii Augusto, tudo bem?

Na documentação do próprio Next ensina como fazer a migração de document.js e app.js.

Vale ressaltar que o equivalente para o app.tsx ponto de entrada no App Router em Next.js 13 é o app/layout.tsx. Este arquivo é usado para renderizar o layout inicial do seu aplicativo e pode ser usado para adicionar funcionalidade global ao seu aplicativo.

  1. CSS Global: Para incluir o CSS globalmente, você pode importá-lo no arquivo page.tsx que está na raiz do diretório app. Isso garantirá que o CSS seja aplicado a todas as páginas.

  2. Estado Global (Redux Store): Você pode criar um hook personalizado para fornecer o estado do Redux e usá-lo em seus layouts ou páginas.

  3. Meta Tags e Scripts: Em Next.js 13, você pode usar o componente Head dentro de seus layouts ou páginas para definir meta tags e scripts. Por exemplo, você pode criar um componente Meta e incluí-lo em seus layouts.

  4. Layouts: Se você tem lógica de layout específica, como a função getLayout que você mencionou, você pode definir isso diretamente nos seus arquivos de layout.

  5. Favicon: Você pode definir o favicon globalmente no arquivo page.tsx ou em um layout específico, usando o componente Head.

Lembre-se de que você pode precisar ajustar os caminhos dos imports conforme a estrutura do seu projeto. Essas são orientações gerais e você pode precisar adaptá-las às especificidades do seu projeto.

Como é um projeto pessoal, outros testes e adaptação poderão ter que ser feitas, mas esse é um bom ponto de partida.

Um abraço!