4 de octubre de 2020

Cómo añadir fotos de Instagram a la página web de NextJS

Mostrar tus fotos de Instagram en tu sitio web (o en el de tu cliente) te permite canalizar parte del tráfico de tu aplicación web a tu cuenta de Instagram y viceversa. Instagram es una gran manera de conectar con tu audiencia y construir tu marca online.

Este post te mostrará un ejemplo de cómo mostrar tus últimas publicaciones de Instagram en tu aplicación web NextJS.

Comienza un proyecto Next.JS

Empecemos a codificar. Primero, vamos a inicializar un proyecto NextJS. Usando create-next-app, que configura todo automáticamente por ti. Abre tu Terminal y ejecuta

npx create-next-app
# o
yarn create next-app

Una vez completada la instalación, ejecuta la aplicación en modo de desarrollo. Sólo tienes que cd en la carpeta y ejecutar

yarn dev

Esto iniciará tu servidor de desarrollo en http://localhost:3000, abre el navegador:

Añadir el paquete de la API web de Instagram

Para obtener la publicación de Instagram, utilizaremos un paquete npm llamado: instagram-web-api. Tenemos que instalar el paquete:

npm install instagram-web-api --save
# o
yarn add instagram-web-api

Actualiza tu página de inicio

Por defecto, Next.js pre-renderiza cada página. Esto significa que Next.js genera el HTML para cada página por adelantado, en lugar de que todo lo haga el JavaScript del lado del cliente.

Abre el archivo pages/index.js y reemplaza todo el código con:

import Head from 'next/head';
import styles from '../styles/Home.module.css';

export default function Home() {
    return (
        <div className={styles.container}>
            <Head>
                <title>Instagram Posts</title>
                <link rel="icon" href="/favicon.ico" />
            </Head>

            <h1>Instagram Posts</h1>
        </div>
    );
}

Ahora tu página debería tener este aspecto:

Fetching and rendering Instagram Posts

Para obtener un mejor rendimiento y SEO, utilizaremos páginas generadas estáticamente: El HTML se genera en tiempo de construcción y se reutiliza en cada solicitud.

Para obtener los datos en tiempo de construcción, necesitamos exportar una función getStaticProps en nuestro pages/index.js.

 import Head from 'next/head';
 import styles from '../styles/Home.module.css';
+import Instagram from 'instagram-web-api';
 
-export default function Home() {
+export default function Home({ posts }) {
     return (
         <div className={styles.container}>
             <Head>
@@ -10,6 +11,31 @@ export default function Home() {
             </Head>
 
             <h1>Instagram Posts</h1>
+            <ul className={styles.list}>
+                {posts.map(({ node }, i) => {
+                    return (
+                        <li key={i}>
+                            <img src={node.display_resources[0].src} />
+                            <p>{node.edge_media_to_caption.edges[0]?.node.text}</p>
+                        </li>
+                    );
+                })}
+            </ul>
         </div>
     );
 }
+
+export async function getStaticProps(context) {
+    const client = new Instagram({ username: 'INSTAGRAM_USERNAME', password: 'INSTAGRAM_PASSWORD' });
+    await client.login();
+
+    const response = await client.getPhotosByUsername({
+        username: 'INSTAGRAM_USERNAME',
+    });
+
+    return {
+        props: {
+            posts: response.user.edge_owner_to_timeline_media.edges,
+        }, // will be passed to the page component as props
+    };
+}

Para obtener la publicación de Instagram, hemos necesitado tres pasos:

Crear el cliente de Instagram
Iniciar sesión en Instagram
Obtener los datos por nombre de usuario.

Después de devolver los posts como props y recibirlos en el componente React Home, lo renderizamos.

Add Styles

Edita tu styles/Home.module.css y el siguiente código:

.container {
  min-height: 100vh;
  padding: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1rem;
}

.list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.list li {
    margin-bottom: 4rem;
    border-bottom: solid 1px lightgray;
    padding-bottom: 2.5rem;
}

.list img {
    max-width: 100%;
}

Freddy Montes