No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Curso de Next.js

Curso de Next.js

Jonathan Alvarez

Jonathan Alvarez

Extendiendo el App

13/27
Recursos

Aportes 16

Preguntas 4

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

En el archivo _app podemos inyectarle anábolicos (providers, themes, props, o cualquier cosa que necesitemos) a toda nuestra aplicación.

Todos los cambios en _app y _document, requieren reinicio de servidor.

Documentación de Custom App:
https://nextjs.org/docs/advanced-features/custom-app

Casos de uso:

  • Providers (Context)
  • Themes
  • Layout
  • Props adicionales

Y Que pasa si queremos tener dos layouts ejemplo la pagina login esa no tiene ni navbar ni footer como hacemos para tener dos o tres layouts ¿?

En react 18 children fue eliminado del tipo FC, para que typescript no de error debes de añadirlo por cuenta propia

import React from 'react'
import { Navbar } from '@components/Navbar/Navbar'

type Props = {
  children: React.ReactNode;
};

export const Layout: React.FC<Props> = ({ children }) => {
  return (
    <>
      <Navbar />
      {children}
      <footer>
        <p>This is a footer</p>
      </footer>
    </>
  )
}

Solución de Stack Overflow

Esto hice para mostrar la página 404 sin el lay out.

import React from 'react';
import { useRouter } from 'next/router';
import Layout from '../src/components/Layout';
import AppContext from '../src/context/AppContext';
import useInitialState from '../src/hooks/useInitialState'

function MyApp({ Component, pageProps }) {
  const router = useRouter();
  const initialState = useInitialState();
  return <AppContext.Provider value={initialState}><CustomLayout pathname={router.pathname}><Component {...pageProps} /></CustomLayout></AppContext.Provider>
}

const CustomLayout = ({ pathname, children }) => (
  <>
    {
      pathname === "/_error" ? <>{children}</>
        : (
          <Layout>{children}</Layout>
        )
    }
  </>
)
// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp

🌟 Extendiendo el app de Next.js

<h4>Ideas/conceptos claves</h4>

documentación de Next.js para un custom app

Advanced Features: Custom App | Next.js

<h4>Apuntes</h4>

La forma en la que Next.js renderiza en el navegador los contenidos es en el siguiente orden:

  • Document
    • App
      • Nuestra Aplicación

para usar el app de nuestra aplicación lo que haremos sera utilizar el template de la documentación de Next.js para un custom app, el cual debemos crear un archivo llamado “_app.js” en pages

import { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  // Providers - Context/Providers, Theme, data
  // Layout
  // props adicionales
  return <Component {...pageProps} />
}

export default MyApp

RESUMEN: Para crear contenedores de nuestra aplicaciones, que deseemos aplicarlo a nivel global, es muy util usar el app de Next.js creando el archivo _app.js

Una opcion alternativa para los nombramientos de los componentes es ponerle el nombre a la carpeta y al archivo tsx llamarlo index . Es decir :

Layout >
index.tsx

Esto con el fin de que en el import se haga referencia a una ruta mas corta e igual de diciente que la que coloca Jonathan, asi:

import Layout from '../components/Layout
	
en vez de 

import Layout from '../components/Layout/Layout';

Extendiendo el App

NextJS primero renderiza el document, luego el app y ese app es el que engloba nuestra aplicación.

Cuando hacemos cambios en app o en document debemos reiniciar el servidor.

Creamos un componente Layout:

import React from 'react'
import Navbar from 'components/Navbar/Navbar'

const Layout: React.FC = ({ children }) => {
  return (
    <div>
      <Navbar />
      {children}
      <footer>This is the footer</footer>
    </div>
  )
}

export default Layout

Y lo usamos en ‘pages/_app.tsx’:

import type { AppProps } from 'next/app'
import Layout from '../components/Layout/Layout'

export default function MyApp({ Component, pageProps }: AppProps): JSX.Element {
  return (
    <Layout>
      <Component {...pageProps} />
    </Layout>
  )
}

import React, { ReactNode } from 'react';
import NavBar from '../Navbar/Navbar';

interface Props {
    children: ReactNode;
}

const Layout = ({children}: Props) => {
    return(
        <div>
            <NavBar />
            {children}
            <footer>soy el pie de pagina</footer>
        </div>
    );
}

export default Layout;```

tambien lo podemos hacer de la siguiente forma :D

En el archivo _app.js yo he inyectado React Conext Providers dependiendo de la ruta. Aun ando aprendiendo del todo Next.js pero ha sido muy uutil esto de extender la funcionalidad de los componentes

Jon! te fuiste un nivel .mas arriba del necesario para importar en NavBar

se podria hacer, ../Navbar/Navbar directamente.

nada una boludez

Actualmente la documentacion recomienda para typescrip el siguiente codigo

https://nextjs.org/docs/basic-features/typescript#custom-app

import type { AppProps } from 'next/app'

export default function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />
}

Dejo este articulo con ejemplos interesantes
https://jools.dev/nextjs-_appjs-example

Todo lo que pasen por las props del tag component queda disponible en las props de todos los hijos (es decir, de todos los componentes de la app:

return(
          <Component {...pageProps} globalProp={algo} otraGlobalProp={otroAlgo} />
    )

_app.tsx

// import App from 'next/app'

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

// Only uncomment this method if you have blocking data requirements for
// every single page in your application. This disables the ability to
// perform automatic static optimization, causing every page in your app to
// be server-side rendered.
//
// MyApp.getInitialProps = async (appContext) => {
//   // calls page's `getInitialProps` and fills `appProps.pageProps`
//   const appProps = await App.getInitialProps(appContext);
//
//   return { ...appProps }
// }

export default MyApp