Obteniendo los últimos tweets con NextJs, sin twitter API.

En este artículo vamos a aprender a traer nuestros últimos tweets mediante el uso de una librería llamada latest tweets, además veremos funcionalidades como getServerSideProps, utilidad con la que haremos el data fetching. Comencemos.

Preparación del entorno

Para comenzar instalaremos la librería nombrada anteriormente en el directorio de nuestra aplicación.

npm i latest-tweets

Una vez instalada, procederemos a abrir nuestro editor de código y nos ubicaremos en el archivo en el que deseamos obtener la información, es importante saber que getServerSideProps no funciona en archivos de tipo componente, la funcionalidad proporcionada por esta utilidad solo funciona adentro de la carpeta pages (ruta especial de Next).

Realizando una promesa getTweets()

Forma de uso de latestTweets:

javascript
1var latestTweets = require('latest-tweets')
2 
3latestTweets('noffle', function (err, tweets) {
4  console.log(tweets)
5})

Primero importamos el modulo de latestTweets de la siguiente manera:

var latestTweets = require('latest-tweets');

Una vez lo hayamos importado, vamos a crear una función llamada getTweets, en esta retornaremos una promise con un callback en donde se encontrará nuestro latestTweets(). Es importante realizar la petición en una promesa, ya que si la realizamos dentro del getServerSideProps esta nos retornara undefined.

javascript
1function getTweets(user) {
2  return new Promise((resolve, reject) => {
3    latestTweets(user, function (err, tweets) {
4      if (err) {
5        return reject(err);
6      }
7
8      return resolve(tweets);
9    });
10  });
11}

Para ver como funciona la petición latestTweets podemos ejecutar en nuestra terminal el comando node y posteriormente ejecutar lo siguiente:

javascript
1var latestTweets = require(‘latest-tweets')
2
3latestTweets('tuUsername', function (err, tweets) { console.log(tweets) })

Vamos a ver que antes de retornar la info va a retornar undefined.

Llamamos a getTweets() en getServerSideProps

Ahora vamos a trabajar con el valor que retorna la promesa que hicimos anteriormente. Creamos una async function getServerSideProps y en ella llamamos a nuestra función con un await y le pasamos el valor del parámetro user. Luego para evitar el error de que hay datos que no pueden ser serializados como JSON, realizamos un stringify. Por último retornamos la response en forma de objeto.

javascript
1export async function getServerSideProps(context) {
2  const tweets = await getTweets('fran_veiras'); // le pasamos el valor del parametro user.
3  const res = await JSON.stringify(tweets); 
4  // al tener valores (como date) que no se pueden leer como json, hacemos stringify
5  
6  if (!tweets) {
7    return {
8      notFound: true,
9    };
10  }
11
12  return {
13    props: { res },
14  };
15}

Captando la respuesta del getServerSideProps en nuestra page

export default function Home({ res }) {…

Realizamos un useEffect que se ejecute cada vez que nuestra página se monte, en el parseamos la response y la seteamos en un state.

javascript
1useEffect(() => {
2    const obj = JSON.parse(res);
3    setTwit(obj);
4  }, []);

Ya tenemos la información lista para ser utilizada, tener en cuenta que se puede limitar la cantidad por defecto de 20 tweets con un slice en el resolve de la pomise.

return resolve(tweets.slice(1, 5));

Fuentes utilizadas: https://www.npmjs.com/package/latest-tweets https://nextjs.org/docs/basic-features/pages https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering