architecture-it/nextjs

Librería para que proporciona diferentes utilidades y funcionalidades cross para utilizar en proyectos con NextJs como así también configuraciones básicas para los diferentes tipos de aplicaciones, ya sean tradicionales o Microfrontend.

Utilidades

cssOverride()

Utilidad para sobreescribir las clases de css modules para evitar colisión de clases en microfrontends. Genera un hash tomando en cuenta el prefijo (Por defecto toma la variable de entorno process.env.process?.env?.npm_package_name o lo setea como string vacio)

next.config.js

const { cssOverwrite } = require("@architecture-it/nextjs");

module.exports = async (_phase, { _defaultConfig }) => {
  /**
   * @type {import('next').NextConfig}
   */
  const nextConfig = {
    //... rest of config
    webpack(config) {
      // rest of config

      // overwrite css rules
      cssOverwrite(config, "customPrefix");

      return config;
    },
    // ...rest of config
  };

  return withBundleAnalyzer(nextConfig);
};

middlewareArq()

CORS middleware que permite privatizar el accesso a los archivos Javascript de la aplicación para que solo puedan ser accesibles a los dominios declarados.

Se puede agregar dominios permitidos, como así también pisar las configuración de headers que se desee setear en la response.

Configuraciones por default:

const CORS_ORIGINS_DEFAULT = [/^https:\/\/(.*\.)?andreani\.com(\.ar)?$/g];
// Ejemplo de dominio permitido: https://www.andreani.com

const CORS_HEADERS_DEFAULT = {
  "Access-Control-Allow-Methods": "GET, OPTIONS",
  "Access-Control-Allow-Headers":
    "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version",
};

Implementación

Para utilizar el middleware se debe agregar un archivo en la aplicación de Next en donde se quiera implementar, en el directorio src que se llame middleware.ts.

Implementación del middleware con las configuraciones por default:

middleware.ts

import { middlewareArq } from "@architecture-it/nextjs";

export const { middleware, config } = middlewareArq({});

Implementación del middleware con configuraciones personalizadas:

middleware.ts

import { middlewareArq } from "@architecture-it/nextjs";

const cors_headers = {
  "Access-Control-Allow-Methods": "*",
  "Access-Control-Allow-Headers": "Content-Type",
};

const cors_origins = [/^https:\/\/(.*\.)?google\.com(\.ar)?$/g];

export const { middleware, config } = middlewareArq({ cors_origins, cors_headers });

Configuraciones

Todas las configuraciones que a continuación se describe son completamente extendibles, es decir, en caso de ser necesario se pueden extender propiedades que vienen por default como así también pisarlas con los valores que se deseen.

basicConfig()

Configuración base para aplicaciones Next Js.

next.config.js

const { basicConfig } = require("@architecture-it/nextjs");

module.exports = basicConfig();

moduleConfig()

Configuración base para aplicaciones Microfrontend con Next Js.

Tiene tres parámetros que se le pueden pasar:

• Primer parámetro: nombre identificatorio del MF (obligatorio).
• Segundo parámetro: configuraciones generales para Next que se quieran extender o pisar de las que trae por defaut. (Opcional)
• Tercer parámetro: configuraciones de webpack para Module Federation, por ejemplo las secciones de la aplicación que se quieran exponer. (Opcional)

next.config.js

const { moduleConfig } = require("@architecture-it/nextjs");

module.exports = moduleConfig(
  "seguimiento",
  {},
  {
    exposes: {
      "./button": "./src/components/button.tsx",
    },
  },
);

jestConfig

Configuraciones básicas de Jest para realizar testing unitario en las aplicaciones y realizar el reporte de coverage.

jest.config.js

const nextJest = require("next/jest");
const { jestConfig } = require("@architecture-it/nextjs");

const createJestConfig = nextJest({
  dir: "./",
});

module.exports = createJestConfig(jestConfig({}));

En el caso que se requiera pisar o extender configuraciones, se puede hacer como se muestra en el siguiente ejemplo:

jest.config.js

const nextJest = require("next/jest");
const { jestConfig } = require("@architecture-it/nextjs");

const createJestConfig = nextJest({
  dir: "./",
});

module.exports = createJestConfig({
  ...jestConfig,
  setupFilesAfterEnv: ["<rootDir>/src/__test__/setupTests.ts"],
  coverageThreshold: {
    global: {
      statements: 80,
      branches: 80,
      functions: 80,
      lines: 80,
    },
  },
});

FAQ

Quiero ejecutar los test y me arroja error discriminando que jestConfig no es una funcion

1. Verificar que architecture-it/nextjs se encuentre en la version 1.4.6 o posterior
2. Validar en el archivos jest.Config que se este llamando a la funcion de la siguiente manera module.exports = createJestConfig(jestConfig({}));
3. Ejecutar los test nuevamente