Obtener consultas Next.js getServerSideProps req.__NEXT_INIT_QUERY y evitar problemas de req.query con Netlify y middlewares
Tags: nextjs, webdev, javascript, devops
Published: 2023-02-12 15:55:49

El objetivo es obtener las Querys de un URL de forma eficiente y sin problemas en NEXT.js en la función getServerSideProps …

---

En el desarrollo de aplicaciones con Next.js, es común requerir acceder a las querys enviadas a través de la URL para mostrar información relevante al usuario. 

Por lo general, se accede a ellas a través de la propiedad req.query en el objeto req que se recibe como argumento en la función getServerSideProps. 

Sin embargo, en algunos casos, es posible que esta información no esté disponible. 

Por ejemplo, cuando se utiliza algún middleware de Express en conjunto con Next.js o cuando se despliega en un entorno como **Netlify**.

--

> Encontré solución a un problema específico con **Netlify** y quiero compartirlo con la **comunidad**, ya que la información disponible sobre este tema es limitada.

--

Para resolver esta situación, Next.js proporciona una propiedad alternativa, `req.__NEXT_INIT_QUERY`, que permite acceder a la información enviada en la query string de una forma más eficiente y fiable.

A continuación, mostrare un ejemplo de código que ilustra el uso de `req.__NEXT_INIT_QUERY` en `getServerSideProps` para acceder a las querys de forma segura y eficiente, incluso en entornos donde `req.query` no está disponible.


```javaScript
export async function getServerSideProps({ req }) {
	const page = req?.query?.page || req?.__NEXT_INIT_QUERY?.page || 0;
	
	return {
		props: {},
	}
}
```

En este ejemplo, se intenta obtener el valor de la variable `page` primero a través de `req.query`, si no se encuentra, se accede a ella a través de `req.__NEXT_INIT_QUERY`, si todavía no se encuentra, se asigna el valor `0` por defecto.

Ahora, supongamos que queremos recuperar los datos de la página 2 de una lista de elementos. En este caso, podríamos escribir el siguiente código:

```javaScript
export async function getServerSideProps({ req }) {
	const page = req?.query?.page || req?.__NEXT_INIT_QUERY?.page || 0;
	
	// Obtener los datos de la página 2
	const data = await fetch(`https://mi-api.com/elementos?page=${page}`);
	const elementos = await data.json();
	
	return {
		props: {
			elementos,
		},
	}
}

```
Y por último, si queremos mandar esa información a un dispatch para:

```javaScript
export const getServerSideProps = initializestore.getServerSideProps((store) => async ({ req }) => {

	const page = req?.query?.page || req?.__NEXT_INIT_QUERY?.page || 0;
	const onPage = !isNaN(Number(page)) ? Number(page) : 0;
	const iniCurrentPage = onPage === 1 ? 0 : onPage;

	await store.dispatch(getElements(ELEMENTS_LIMIT, Math.max(iniCurrentPage - 1, 0) * ELEMENTS_LIMIT));

	return {
		props: {
		},
	};
});
```
En este ejemplo, se usó `initializestore.getServerSideProps` para inicializar el almacén de datos y realizar una solicitud de los datos necesarios en el lado del servidor. 

La función `getServerSideProps` recibe `store` como argumento, que es el almacén de datos, y permite realizar una acción de despacho en el almacén antes de renderizar la página.

---

Espero haberles ayudado, a darle átomos 🤜🤛🤓

-- FIN --