Obtener consultas Next.js getServerSideProps req.__NEXT_INIT_QUERY y evitar problemas de req.query con Netlify y middlewares

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.

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:

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:

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 --