Implementar getStaticProps

Pre-renderizado en Next.js

Next.js tiene dos formas de pre-renderizado: Generación Estática y Renderizado del lado del servidor (SSR). La diferencia está en cuándo se genera el HTML para una página.

• Generación Estática es el método de pre-renderizado que genera el HTML en tiempo de compilación (build time). El HTML pre-renderizado luego se reutiliza en cada solicitud.
• Renderizado del lado del servidor (SSR) es el método de pre-renderizado que genera el HTML en cada solicitud.

Es importante destacar que Next.js te permite elegir qué forma de pre-renderizado usar para cada página. Puedes crear una aplicación Next.js "híbrida" usando Generación Estática para la mayoría de las páginas y Renderizado del lado del servidor para otras.

Usando Generación Estática (getStaticProps())

Ahora, necesitamos agregar una importación para getSortedPostsData y llamarla dentro de getStaticProps en pages/index.js.

Abre pages/index.js en tu editor y agrega el siguiente código encima del componente Home exportado:

import { getSortedPostsData } from '../lib/posts';
 
export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

Al devolver allPostsData dentro del objeto props en getStaticProps, las publicaciones del blog se pasarán al componente Home como una prop. Ahora puedes acceder a las publicaciones del blog así:

export default function Home ({ allPostsData }) { ... }

Para mostrar las publicaciones del blog, actualicemos el componente Home para agregar otra etiqueta <section> con los datos debajo de la sección con tu presentación personal. No olvides también cambiar las props de () a ({ allPostsData }):

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      {/* Mantén el código existente aquí */}
 
      {/* Agrega esta etiqueta <section> debajo de la etiqueta <section> existente */}
      <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
        <h2 className={utilStyles.headingLg}>Blog</h2>
        <ul className={utilStyles.list}>
          {allPostsData.map(({ id, date, title }) => (
            <li className={utilStyles.listItem} key={id}>
              {title}
              <br />
              {id}
              <br />
              {date}
            </li>
          ))}
        </ul>
      </section>
    </Layout>
  );
}

Ahora deberías ver los datos del blog si accedes a http://localhost:3000.

¡Felicidades! Hemos recuperado con éxito datos externos (del sistema de archivos) y pre-renderizado la página de inicio con estos datos.

Hablemos sobre algunos consejos para usar getStaticProps en la siguiente página.