Empezamos creando nuestra aplicación con [**Next.js**](https://nextjs.org/) y [**TypeScript**](https://www.typescriptlang.org/), para eso nos vamos a la documentación de [Next.js](https://nextjs.org/docs) y buscamos [TypeScript](https://nextjs.org/docs/basic-features/typescript), en el apartado de Basic Features, nos dirigimos a la opción de TypeScript, luego ejecutamos uno de los comandos para crear nuestra aplicación, dependiendo al gestor de paquetes que uses ejecutas el comando, en mi caso usaré `pnpm`.

---

Una vez que hemos creado nuestra aplicación, es hora de configurar eslint y prettier en nuestro proyecto.

## Configurar ESLint:

[**ESLint**](https://eslint.org/) es una herramienta de linting de código para JavaScript. Su objetivo principal es detectar y reportar errores en el código, al mismo tiempo que se aplican reglas y convenciones de codificación que aseguran que el código sea legible, coherente y cumpla con ciertos estándares. Con ESLint, puedes garantizar la calidad del código, lo que facilita la detección temprana de errores y mejora la mantenibilidad y escalabilidad del código a largo plazo.

1. Para configurar eslint, necesitamos inicializarlo. Para ello, podemos utilizar el comando [`npx eslint --init`](https://eslint.org/docs/latest/use/getting-started) que nos permitirá crear una configuración para eslint sin tener instalado eslint en nuestro sistema.

2. Seguidamente tendras que elegir algunas opciones para tu configuracion de eslint, te recomiendo seleccionar las opciones que yo eliga ya que son las opciones estandares para una configuracion de eslint.

    ```powershell:Terminal {1,7,10,17,23,26,27,30,37,44,54} showLineNumbers
    npx eslint --init
    --------------------------------------------------------
    You can also run this command directly using 'npm init @eslint/config'.
    ? How would you like to use ESLint? ... 
      To check syntax only
      To check syntax and find problems
    > To check syntax, find problems, and enforce code style
    --------------------------------------------------------
    ? What type of modules does your project use? ... 
    > JavaScript modules (import/export)
      CommonJS (require/exports)
      None of these
    --------------------------------------------------------
    // En esta opcion puedes elegir el framework que uses, pero recuerda que en nuestro caso estamos usando React

    ? Which framework does your project use? ... 
    > React
      Vue.js
      None of these
    --------------------------------------------------------
    // En esta opción seleccionaremos la opcion No, ya que nosotros configuraremos el soporte para TypeScript manualmente

    ? Does your project use TypeScript? » [No] / Yes
    --------------------------------------------------------
    ? Where does your code run? ...  (Press <space> to select, <a> to toggle all, <i> to invert selection)
      √ Browser
      √ Node
    --------------------------------------------------------
    ? How would you like to define a style for your project? ... 
    > Use a popular style guide
      Answer questions about your style
    --------------------------------------------------------
    // En este apartado tu puedes elegir la guia que mas te guste y se acomode a tus necesidades, en mi caso usare la guia Standard ya que es el mas usado por la comunidad

    ? Which style guide do you want to follow? ... 
      Airbnb: https://github.com/airbnb/javascript
    > Standard: https://github.com/standard/standard
      Google: https://github.com/google/eslint-config-google
      XO: https://github.com/xojs/eslint-config-xo
    --------------------------------------------------------
    // En esta parte elige el fomato de archivo que mas te guste, en mi caso será JavaScript

    ? What format do you want your config file to be in? ... 
    > JavaScript
      YAML
      JSON
    --------------------------------------------------------
    // En este apartado seleccionamos la opcion No, debido a que nosotros instalaremos las dependencias manualmente dependiendo al gestor de paquetes que estemos usando.

    Checking peerDependencies of eslint-config-standard@latest
    The config that you've selected requires the following dependencies:

    eslint-plugin-react@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0
    ? Would you like to install them now? » [No] / Yes
    ```

    Una vez completadas las opciones, se creará un archivo [**`.eslintrc.js`**](https://eslint.org/docs/latest/use/configure/configuration-files#configuration-file-formats) con una configuración básica de ESLint.

3. Ahora, es necesario instalar las dependencias que faltan para el proyecto. Para ello, ejecuta el siguiente comando en la terminal:




    ```powershell
    pnpm add -D -E eslint-plugin-react eslint-config-standard eslint eslint-plugin-import eslint-plugin-n eslint-plugin-promise **@yonycalsin/eslint-plugin-import-sort**
    ```

    Además, instalaremos un paquete que permitirá ordenar automáticamente las importaciones de módulos y componentes. Esto mejorará la legibilidad del código y facilitará su mantenimiento. Para ello, asegúrate de incluir la siguiente dependencia en el comando anterior:

    ```powershell
    @yonycalsin/eslint-plugin-import-sort
    ```

4. Para brindar soporte a TypeScript, es necesario instalar ciertos módulos. Puede realizar la instalación de los mismos utilizando el siguiente comando en la Terminal:

    ```powershell
    pnpm add -D -E @typescript-eslint/eslint-plugin @typescript-eslint/parser
    ```

    Con esta instrucción se instalarán los módulos [**`@typescript-eslint/eslint-plugin`**](http://npmjs.com/package/@typescript-eslint/eslint-plugin) y [**`@typescript-eslint/parser`**](https://www.npmjs.com/package/@typescript-eslint/parser), los cuales son esenciales para el correcto funcionamiento de TypeScript en su proyecto. El flag **`-D`** se utiliza para instalarlos como dependencias de desarrollo y **`-E`** para asegurarse de que se instalen en la versión más reciente.

5. Ahora configuramos el archivo `.eslintrc.js`, abrimos el archivo y realizamos algunas modificaciones.

    ```jsx:.eslintrc.js {12,14,22,24,25,26,27}
    module.exports = {
      env: {
        browser: true,
        es2021: true,
        node: true,
      },
      extends: [
        'next/core-web-vitals',
        'next',
        'plugin:react/recommended',
        'standard',
        'plugin:@yonycalsin/import-sort/react',
      ],
      parser: '@typescript-eslint/parser',
      overrides: [],
      parserOptions: {
        ecmaVersion: 'latest',
        sourceType: 'module',
      },
      plugins: [
        'react',
        '@typescript-eslint'
      ],
      rules: {
        'react/react-in-jsx-scope': 'off',
        'no-undef': 'off',
      },
    }
    ```

    Las lineas de codigo resaltados, son cambios que nosotros realizamos en la configuracion. En primer lugar, se ha agregado el paquete [**`@yonycalsin/eslint-plugin-import-sort`**](https://www.npmjs.com/package/@yonycalsin/eslint-plugin-import-sort) como un plugin de eslint. Además, se han agregado los paquetes necesarios para dar soporte a TypeScript, junto con algunas reglas necesarias en la sección de **`rules:{…}`**. Cabe destacar que el resto de las configuraciones son las predeterminadas de eslint.

6. Para ejecutar eslint en nuestro proyecto, es necesario agregar los scripts correspondientes en el archivo `package.json`.

    ```json
    "lint": "next lint",
    "lint:fix": "pnpm run lint --fix",
    ```

    El primer script, **`"lint": "next lint"`**, se encarga de ejecutar la herramienta de linting en el proyecto. En este caso, utilizamos la herramienta de linting integrada de Next.js, que se ejecuta con el comando **`next lint`**.

    El segundo script, **`"lint:fix": "pnpm run lint --fix"`**, se encarga de ejecutar la herramienta de linting y aplicar automáticamente las correcciones sugeridas. Utilizamos el comando **`pnpm run lint`** para ejecutar la herramienta de linting y la opción **`--fix`** para que la herramienta aplique las correcciones sugeridas automáticamente. De esta manera, podemos asegurarnos de que nuestro código cumple con los estándares de calidad y estilo establecidos.

7. Ahora que hemos añadido los scripts necesarios, es hora de poner a prueba nuestra configuración de ESLint. Para ello, ejecutamos el comando **`pnpm run lint`**. Este comando verifica los errores que hay en nuestro código y nos muestra un informe detallado, como se muestra en la siguiente imagen:

    ![pnpm-run-lint](https://res.cloudinary.com/abrahamcalsin/image/upload/v1681532405/projects/abrahamcalsin/blog/como-instalar-y-configurar-eslint-y-prettier-en-un-proyecto-nextjs-y-typescript/pnpm-run-lint.jpg)

    En este ejemplo, podemos ver todos los errores que se encontraron en el código. Para corregir estos errores, seguiremos los pasos que se describen a continuación.

8. Ahora ejecutamos el siguiente comando `pnpm run lint:fix` para corregir los errores de nuestro codigo automaticamente, ejm:

    ![pnpm-run-lint-fix](https://res.cloudinary.com/abrahamcalsin/image/upload/v1681532473/projects/abrahamcalsin/blog/como-instalar-y-configurar-eslint-y-prettier-en-un-proyecto-nextjs-y-typescript/pnpm-run-lint-fix.jpg)

---

¡Genial! Ahora tenemos nuestra configuración de ESLint lista. Sin embargo, si tienes instalada la extensión de Prettier en tu editor(y deberias tenerlo), es posible que sigas experimentando problemas de formato en tu código. Esto se debe a que ESLint trata de realizar la tarea de Prettier y es ahí donde se genera un conflicto.

No te preocupes si aún encuentras errores de formato en tu código, a continuación procederemos a configurar Prettier para que pueda trabajar en conjunto con ESLint sin conflictos.

## Configurar Prettier:

**[Prettier](https://prettier.io/)** es una herramienta de formateo de código que se utiliza para automatizar el proceso de dar formato a un código fuente.

1. Para comenzar con la configuración, primero instalamos algunas dependencias de desarrollo de Prettier. La mayoria de las despendencias no son propios de Prettier, fueron creados por la comunidad.

    ```powershell
    pnpm add -D -E prettier eslint-config-prettier eslint-plugin-prettier @yonycalsin/prettier-config-react-typescript
    ```

    A continuación, se detalla el uso de cada una de estas dependencias:

    1. El paquete [`eslint-config-prettier`](https://www.npmjs.com/package/eslint-config-prettier) es una configuración de ESLint que desactiva todas las reglas de ESLint que pueden entrar en conflicto con las reglas de formato de código de Prettier.
    2. El paquete [`eslint-plugin-prettier`](https://www.npmjs.com/package/eslint-plugin-prettier) es un plugin para ESLint, que es una herramienta de análisis de código estático para JavaScript. Este plugin se utiliza para asegurar que el código de JavaScript siga las reglas de formato establecidas por Prettier, que es una herramienta de formateo de código.
    3. El paquete [`@yonycalsin/prettier-config-react-typescript`](https://www.npmjs.com/package/@yonycalsin/prettier-config-react-typescript) es una configuración preestablecida para Prettier, específicamente para proyectos que utilizan [**React**](https://react.dev/) y [**TypeScript**](https://www.typescriptlang.org/).

2. A continuación, accedemos a la configuración de ESLint en el archivo [`.eslintrc.js`](https://eslint.org/docs/latest/use/configure/configuration-files) y realizamos un cambio para evitar conflictos con ESLint. Agregamos **`prettier`** en la sección de **`extends:[]`**.

    ```jsx:.eslintrc.js {4} showLineNumbers
    module.exports = {
      extends: [
        ...
        'prettier',
      ],
      parser: '...',
      overrides: [],
      parserOptions: {
        ecmaVersion: '...',
        sourceType: '...',
      },
      plugins: ['...'],
      rules: {...},
    }
    ```

    Al agregar **`'prettier'`** en la sección **`extends`**, estamos indicando que queremos usar las reglas de formato definidas en Prettier junto con las reglas de ESLint, lo que nos ayudará a evitar conflictos entre ambas herramientas.

3. Ahora debemos crear un archivo de configuración de Prettier para poder personalizar su comportamiento. Este archivo debe llevar el nombre de [`.prettierrc.js`](https://prettier.io/docs/en/configuration.html). Puedes agregar tu propia configuración de Prettier con soporte para React y TypeScript, aunque existen paquetes que lo hacen por nosotros, como el que hemos instalado: [`@yonycalsin/prettier-config-react-typescript`](https://www.npmjs.com/package/@yonycalsin/prettier-config-react-typescript).

    Este paquete ya tiene una configuración establecida para el soporte de React y TypeScript, por lo que en este caso utilizaremos esta opción. La configuración de Prettier se vería así:

    ```jsx
    module.exports = require('@yonycalsin/prettier-config-react-typescript');
    ```

    ¡Eso es todo! Con este simple archivo de configuración, ya tendremos Prettier configurado para trabajar con React y TypeScript.

---

## - En conlusión:

En conclusión, la configuración de [**ESLint**](https://eslint.org/) y [**Prettier**](https://prettier.io/) en nuestros proyectos tiene un gran impacto en la legibilidad de nuestro código y nos ayuda a prevenir errores malintencionados. Utilizar estas herramientas es altamente recomendado por expertos en programación y se considera una buena práctica. Incorporar ESLint y Prettier en nuestro flujo de trabajo nos permitirá escribir código más limpio y consistente, lo que a su vez puede mejorar la calidad y mantenibilidad del software que desarrollamos.

En este tutorial, aprenderás a instalar y configurar ESLint + Prettier en un proyecto Next.js y TypeScript

ESLint y Prettier en Next.js y TypeScript

En este artículo veremos **Cómo implementar tema oscuro con [Chakra UI](https://chakra-ui.com/) en una aplicación [Next.js](https://nextjs.org/)**. Primero, necesitas tener Chakra UI instalado en tu entorno de desarrollo. Si aún no lo tienes, instálalo **[siguiendo las instrucciones en su sitio web](https://chakra-ui.com/getting-started/nextjs-guide#installation)**.

---

En la documentación oficial de Chakra UI, busca la sección **[Color Mode](https://chakra-ui.com/docs/styled-system/color-mode)**. Esta es la guía que seguiremos para agregar el tema oscuro a nuestra aplicación.

Antes de seguir con el proceso, debes tener ya creado tu propia configuración del tema principal de la aplicación con Chakra UI. Si aun no lo tienes, sigue estos pasos para hacerlo:

1. Crea una nueva carpeta llamada `src`

2. Dentro de `src`, crea otra carpeta llamada `themes`

3. Dentro de `themes`, crea un nuevo archivo llamado `main-theme.ts`

La estructura debería verse así: `src/themes/main-theme.ts` y la configuracion inicial del tema seria la siguiente:

```tsx:./main-theme.ts
import { extendTheme } from '@chakra-ui/react'

const mainTheme = extendTheme({})

export default mainTheme
```

Una vez que hayas agregado la configuración del tema principal, puedes agregar más opciones como colores, espacios, estilos para MDX, etc. siguiendo la **[documentación de Chakra UI](https://chakra-ui.com/docs/styled-system/customize-theme)**.

---

En este caso, sólo queremos agregar el modo de color a nuestra aplicación. Para ello, necesitamos agregar un "script del modo de color" (ColorModeScript) de Chakra UI dentro de la etiqueta body en nuestra aplicación.

Para hacerlo, debemos dirigirnos a la carpeta `pages` y entrar al archivo `_document.tsx`. Dentro de la etiqueta body insertamos el `script`:

```tsx:./_document.tsx {1, 12}
import { ColorModeScript } from '@chakra-ui/react'
import NextDocument, { Html, Head, Main, NextScript } from 'next/document'
import mainTheme from "../src/themes/main-theme";

export default class Document extends NextDocument {
  render() {
    return (
      <Html lang='en'>
        <Head />
        <body>
          {/* 👇 Aquí esta el script */}
          <ColorModeScript initialColorMode={mainTheme.config.initialColorMode} />
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

Y listo, ya tienes el modo oscuro agregado en tu aplicación.

---

Ahora, para activarlo, debes agregar un botón o una opción en tu aplicación que permita al usuario cambiar entre los modos de color. Para ello debes crear un componente independiente, `dark-theme-button`. Chakra UI nos proporciona un hook para habilitar el modo oscuro de nuestra aplicacion, importamos el hook `useColorMode()`, y usamos las funciones `colorMode` y `toggleColorMode`, aqui te presento un ejemplo de lo que vendria a ser el boton:

```tsx:./dark-theme-button.tsx
import * as React from 'react'
import { Box, useColorMode } from '@chakra-ui/react'

import { MoonFillIcon } from './components/moon-fill-icon'
import { SunFillIcon } from './components/sun-fill-icon'

export function DarkThemeButton() {
  const { colorMode, toggleColorMode } = useColorMode()

  return (
    <Button onClick={() => toggleColorMode()}>
      {colorMode === 'dark' ? <SunFillIcon /> : <MoonFillIcon />}
    </Button>
  )
}
```

---

Para agregarlo a tu aplicación, debes importar el componente que acabas de crear y colocarlo en el lugar deseado en tu aplicación. Por ejemplo, si quieres agregarlo en la barra de navegación, podrías hacerlo de la siguiente manera:

```tsx:./navbar.tsx {1, 9}
import { DarkThemeButton } from "~/components/dark-theme-button";

function Navbar() {
  return (
    <Flex as="nav">
      <Link href="#">Home</Link>
      <Link href="#">About</Link>
      <Link href="#">Contact</Link>
      <DarkThemeButton />
    </Flex>
  );
}
```

Así, el usuario podrá cambiar entre el modo claro y el modo oscuro de tu aplicación con facilidad.

Ten en cuenta que puedes personalizar el aspecto del botón desde su componente.

---

> **Nota:** Si te diste cuenta de que al importar el componente `DarkThemeButton` lo hacemos utilizando el símbolo de la viñeta (~), eso se conoce como rutas absolutas. Si deseas aplicarlo en tu proyecto, te invito a revisar mi articulo que escribi sobre cómo **[Configurar rutas absolutas en React](/blog/rutas-absolutas-en-react).**
> 

---

En resumen, para agregar un tema oscuro a tu aplicación Next.js con Chakra UI, debes seguir los siguientes pasos:

1. Instalar Chakra UI en tu entorno de desarrollo

2. Crear una configuración del tema principal en tu aplicación

3. Agregar el script del modo de color en la etiqueta body en tu archivo `_document.tsx`

4. Agregar un botón o una opción para cambiar entre los modos de color utilizando un componente personalizado

Espero que esta información te sea útil para agregar un tema oscuro en tu aplicación Next.js con Chakra UI.

Aprende a implementar el tema oscuro en tu aplicación Next.js con Chakra UI. Siguiendo los pasos este tutorial, podrás agregar un modo oscuro personalizado a tu proyecto.

Tema oscuro con Chakra UI en Next.js

¿Has desarrollado una aplicación en **[Next.js](https://nextjs.org/)** y quieres proteger una de tus rutas de API para evitar el acceso no autorizado? Una forma de hacerlo es mediante la implementación de una clave o key de API personalizada.

Existen varias formas de implementar esta configuración en Next.js. En este artículo, veremos cómo utilizar el paquete de Npm **[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)** para proteger una ruta de API utilizando una clave de API.

> **Nota:** Antes de empezar, es importante mencionar que un middleware es un componente que se ejecuta entre la petición del usuario y la respuesta del servidor. En el contexto de **[Next.js](https://nextjs.org/docs/advanced-features/middleware)**, un middleware puede ser utilizado para agregar funcionalidades adicionales a una ruta de API, como la autenticación.

## Configuracion:

Para implementar la autenticación de API Key en Next.js con ****[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)****, sigue los siguientes pasos:

1. Instala el paquete **[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)** utilizando el gestor de paquetes que prefieras. Por ejemplo, si estás utilizando **[pnpm](https://pnpm.io/)**:
  
    ```powershell:Terminal
    pnpm add nextjs-auth-middleware@latest
    ```

2. Abre el archivo de tu ruta de API, por ejemplo: **`./pages/api/articles.{ts,js}`**. La estructura básica del archivo debería verse así:

    ```tsx:./pages/api/articles.{ts,js}
    import { NextApiRequest, NextApiResponse } from 'next'
    export default function handler(req: NextApiRequest, res: NextApiResponse) {
      res.status(200).json({ name: 'John Doe' })
    }
    ```

3. Dentro del archivo, importa el paquete **[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)** y utiliza su middleware para proteger la ruta de API. El paquete nos proporciona una opción como propiedad del módulo: **`processEnv`**, que nos permite especificar el nombre de la variable de entorno que guarda la clave de API. Esta propiedad es opcional, si no especificas un nombre, se utilizará el nombre predefinido por el módulo: **`API_ROUTE_PUBLIC_KEY`**. Ahora vamos a refactorizar el código para que el ejemplo tenga un uso más real. Por ejemplo:

    ```tsx:./pages/api/articles.{ts,js} {7}
    import NextAuthMiddleware from 'nextjs-auth-middleware'

    import { notion } from '~/lib/notion'

    export default async function handler(req, res) {
      // La variable de entorno es API_ROUTE_PUBLIC_KEY, puedes modificarlo a tu gusto
      await NextAuthMiddleware(req, res)

      const response = await notion({
        notionApiKey: process.env.NOTION_API_KEY,
        notionDatabaseId: process.env.NOTION_BLOG_DATABASE_ID,
        sorts: [
          {
            property: 'startedAt',
            direction: 'descending',
          },
        ],
        filter: {
          property: 'status',
          select: { equals: 'published' },
        },
      })

      res.status(200).json(response)
    }
    ```

    En este ejemplo utilizamos la **[API de Notion](https://developers.notion.com/)** para obtener todos los artículos de la base de datos. En la línea 7, utilizamos el paquete **[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)** para ejecutar de forma asíncrona la función de autenticación.

4. Genera una clave de API única y segura. Puedes hacerlo utilizando una herramienta de generación de claves de API o simplemente creando una cadena aleatoria de caracteres utilizando una combinación de letras, números y símbolos. En mi caso, usaré la terminal y ejecutaré el siguiente comando:

    ```powershell:Terminal
    node -e "console.log(crypto.randomBytes(20).toString('hex'))"
    ```

    Este comando ejecuta una pequeña aplicación de Node.js que utiliza la función **[`crypto.randomBytes()`](https://nodejs.org/api/crypto.html#cryptorandombytessize-callback)** de la biblioteca de criptografía incluida en [**Node.js**](https://nodejs.org/) para generar (20 bytes) de datos aleatorios y luego los convierte en una cadena hexadecimal utilizando la función **[`toString()`](https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Global_Objects/Object/toString).**

5. Crea una variable de entorno con el nombre especificado en el paso 3 y asigna a ella la clave de API generada en el paso 4. Por ejemplo, si utilizaste el nombre predeterminado **`API_ROUTE_PUBLIC_KEY`**, puedes crear la variable de entorno de la siguiente manera:

    ```powershell
    API_ROUTE_PUBLIC_KEY=[mySecretApiKey]
    ```

    Si utilizaste un nombre de variable de entorno diferente en el paso 3, reemplaza **`API_ROUTE_PUBLIC_KEY`** por el nombre que especificaste.

6. Ya puedes utilizar la clave de API para proteger la ruta de API. Cada vez que un usuario haga una petición a la ruta de API, se le pedirá que proporcione la clave de API en el encabezado de la petición. Si la clave proporcionada es válida, se permitirá el acceso a la ruta de API. Si la clave es inválida, se rechazará la petición y se devolverá un error **[HTTP 401](https://developer.mozilla.org/es/docs/Web/HTTP/Status)** (no autorizado).

Es importante tener en cuenta que esta es solo una forma de implementar la autenticación de API Key en Next.js. Existen otras formas de hacerlo, como utilizar la autenticación básica o **[JWT (JSON Web Token)](https://jwt.io/)**. Cada enfoque tiene sus propias ventajas y desventajas, y debes elegir el que mejor se adapte a tus necesidades.

---

¡Bien!, hemos terminado de configurar una clave en nuestra ruta de API. Ahora, solo nos queda desplegar nuestra aplicación en un hosting. Te recomiendo usar **[Vercel](https://vercel.com/)**, ya que es gratuito y fue diseñado específicamente para trabajar con aplicaciones Next.js, lo que nos permite aprovechar al máximo todas las características y ventajas de Next.js al desplegar en este servicio de **[hosting](https://developer.mozilla.org/es/docs/Learn/Getting_started_with_the_web/Publishing_your_website)**.

No olvides agregar la key en tu variable de entorno. Por ejemplo en producción si es Vercel:

![Add environment variables in vercel](https://res.cloudinary.com/abrahamcalsin/image/upload/v1672118576/projects/abrahamcalsin/blog/add-a-custom-api-key-to-protect-an-api-route-in-nextjs/add-environment-variables-in-vercel.png)

Si estas en modo desarrollo, puedes agregar una variable de entorno simple y facil, ejm: `myLocalApiKey`, recuerda, estas en modo desarrollo. Sin embargo, ten cuidado al hacerlo en entornos de producción. Recuerda que en modo de desarrollo, la seguridad y la protección de la información pueden no ser tan importantes como en entornos de producción.

## Conclusión:

En conclusión, proteger las rutas de API es importante para evitar el acceso no autorizado y garantizar la seguridad de tu aplicación. Utilizar una clave de API personalizada es una forma eficaz de hacerlo, y el paquete **[Nextjs Auth Middleware](https://www.npmjs.com/package/nextjs-auth-middleware)** nos proporciona una solución fácil de usar para implementarla en Next.js.

Como proteger una ruta de API en Next.js con una clave de API personalizada

Proteger API route con clave en Next.js

En proyectos de [React](https://reactjs.org/), es común tener que importar módulos y componentes para utilizarlos en diferentes archivos. Una forma de hacerlo es utilizando `rutas relativas`, que se basan en la ubicación del archivo actual y se indican con puntos `../`. Por ejemplo:

```tsx
// Rutas relativas
import { getAllCharacters } from "../../services/get-all-characters"
import { useDarkTheme } from "../../hooks/use-dark-theme"

import { Header } from "../src/components/header"
import { Footer } from "../src/components/footer"
```

Sin embargo, esto puede ser problemático en proyectos grandes o complejos debido a la dificultad de mantenimiento y legibilidad del código.

Para solucionar este problema, podemos utilizar las `rutas absolutas`, que indican la ubicación exacta del módulo o componente que queremos importar, independientemente de donde se encuentre el archivo. Esto hace que el código sea más sencillo de entender, y reduce la posibilidad de importar módulos y componentes.

## Configurar rutas absolutas en React + TypeScript:

En proyectos [React(cra) + TypeScript](https://create-react-app.dev/docs/adding-typescript/), podemos configurar el uso de rutas absolutas siguiendo la *[**doc. oficial**](https://www.typescriptlang.org/tsconfig#baseUrl)* de [TypeScript](https://www.typescriptlang.org/), antes ya debes tener listo e inicializado tu aplicación.

1. Abrimos el archivo de configuración `tsconfig.json` del proyecto y agregamos la opción de configuración `baseUrl: “.”` en el apartado de `compilerOptions`. Esto establece un directorio base para resolver nombres de módulos no absolutos.

2. Agregamos la opción de configuración `paths` de la misma manera en el apartado de `compilerOptions`. Esto nos permite definir rutas personalizadas para importar módulos y componentes de forma absoluta. Por ejemplo:

    ```json:./tsconfig.json
    "paths": {
      "~/*": ["src/*"]
    }
    ```

    En un principio asignamos una ruta personalizada `~/*` para indicar el tipo de importación que se hará.

    Después definimos la carpeta donde se aplicara este tipo de importación, `["./src/"]`, el símbolo `*` indica que esta configuración se aplicara a todos los archivos que estén dentro de la carpeta `src`.

Con esta configuración, podemos importar módulos y componentes de la siguiente manera:

```tsx
// Rutas absolutas
import { getAllCharacters } from "~/services/get-all-characters"
import { useDarkTheme } from "~/hooks/use-dark-theme"

import { Header } from "~/components/header"
import { Footer } from "~/components/footer"
```

Si tú quieres aplicar este tipo de importación en otras carpetas fuera `src`, simplemente agregas el directorio como una nueva opción de configuración. Por ejemplo:

```json:./tsconfig.json {3}
"paths": {
  "~/*": ["src/*"]
  "~/server*": ["./server*"]
}
```

## Configurar rutas absolutas en React vanilla(create-react-app / cra):

En proyectos [React vanilla (create-react-app / cra)](https://create-react-app.dev/), en su versión actual podemos configurar el uso de rutas absolutas modificando el archivo de configuración de Webpack (`webpack.config.js`).

Para hacerlo, seguimos los siguientes pasos:

1. Modificar el archivo de configuración de Webpack:

    ```jsx:./webpack.config.js
    // Con la sintaxis de commonJS
    const path = require("path")

    // Con la sintaxis de ES Modules
    import path from "path"

    /* ****** */

    module.exports = {
      // ...
      resolve: {
        alias: {
          "~": path.resolve(__dirname, "src"),
        },
      },
    };
    ```

Con esta configuración, podemos importar módulos y componentes de la siguiente manera:

```tsx
import { getAllCharacters } from "~/services/get-all-characters"
import { useDarkTheme } from "~/hooks/use-dark-theme"

import { Header } from "~/components/header"
import { Footer } from "~/components/footer"
```

Es importante tener en cuenta que este ejemplo es solo una forma de configurar el uso de rutas absolutas en un proyecto [React Vanilla (create-react-app / cra)](https://create-react-app.dev/). Puede haber otras formas de hacerlo dependiendo de la versión y configuración del proyecto.

## Conslusión:

En conclusión, el uso de rutas absolutas en proyectos de [React](https://reactjs.org/), o cualquier framework o librería, puede mejorar la legibilidad y eficiencia del código al reducir la posibilidad de errores al importar módulos y componentes.

Es importante tener en cuenta que el uso de rutas absolutas puede tener ciertas ~"desventajas"~, como un mayor tiempo de configuración y la necesidad de utilizar una sintaxis específica para las importaciones. Sin embargo, en proyectos grandes o complejos, el uso de rutas absolutas puede ser muy beneficioso para mejorar la legibilidad y mantenibilidad del código. Aplícalo a tu necesidad y a tu gusto.

Cómo utilizar y configurar rutas absolutas para importar módulos y componentes en proyectos React

Rutas absolutas en React

En este artículo te mostraré las extensiones que utilizo a diario en mi principal editor de código <b>_Visual Studio Code._</b>

---

## - Prettier:

Formatea tu código de manera elegante, puedes configurar el estilo de formateo.

![Prettier](https://i.ibb.co/BfXsN0y/prettier.png 'Prettier')

---

## - Material Icon Theme:

Añade iconos a los archivos y/o carpetas según su tipo.

![Material Icon Theme](https://i.ibb.co/r7QD1qc/material-icon-theme.png 'Material Icon Theme')

---

## - Error Lens:

Diagnostica tu código y detecta si hay un error en él, y si lo hay te muestra una info. con el motivo del error.

![Error Lens](https://i.ibb.co/K9pQ7wn/error-lens.png 'Error Lens')

---

## - GitLens:

Muestra un historial de cambios de código en Git.

![GitLens](https://i.ibb.co/rsgRJrb/git-lens.png 'GitLens')

---

## - Moonlight:

Ofrece un tema de VS Code con colores chicle sobre un fondo iluminado por la luna.

![Moonlight](https://i.ibb.co/1Kchq0s/moonlight.png 'Moonlight')

---

## - Path Intellisense:

Autocompleta las rutas de importación de archivos.

![Path Intellisense](https://i.ibb.co/RHq5k09/path-intellisense.png 'Path Intellisense')

---

## - WakaTime:

Gestiona las métricas, la información y el seguimiento del tiempo generado automáticamente a partir de tu actividad de codificación.

![WakaTime](https://i.ibb.co/bFhK7WR/wakatime.png 'WakaTime')

---

## - Live Server:

Lanza un servidor local de desarrollo en tiempo real para páginas estáticas y dinámicas.

![Live Server](https://i.ibb.co/LvpWkmp/live-server.png 'Live Server')

---

## - Auto Rename Tag:

Cambia automáticamente el nombre de las etiquetas HTML/XML que coincidan.

![Auto Rename Tag](https://i.ibb.co/DkpQYcN/auto-rename-tag.png 'Auto Rename Tag')

---

## - ENV:

Añade soporte de formato y resaltado de sintaxis para archivos env (.env).

![ENV](https://i.ibb.co/FDcK27D/env.png 'ENV')

---

## - Live Share:

Permite el desarrollo en colaboración con equipos en tiempo real.

![Live Share](https://i.ibb.co/rvn8Xby/live-share.png 'Live Share')

---

## - Node-readme:

Muestra la documentación del módulo javascript en el editor.

![Node-readme](https://i.ibb.co/7STW6Rw/node-readme.png 'Node-readme')

---

## - Tailwind CSS IntelliSense:

Es un complemento de Tailwind CSS, facilita la escritura de estilos en las clases de tailwind.

![Tailwind CSS IntelliSense](https://i.ibb.co/xDPHv6J/tailwindcss-intelliSense.png 'Tailwind CSS IntelliSense')

---

## - MDX:

Proporciona soporte de formato, estilo y resaltado de sintaxis para archivos MDX (JSX en Markdown).

![MDX](https://i.ibb.co/m5rr0PV/mdx.png 'MDX')

---

## - Version Lens:

Muestra la última versión de cada paquete que tienes instalado en tu proyecto.

![Version Lens](https://i.ibb.co/gmSRm1Y/version-lens.png 'Version Lens')

Las mejores extensiones de VSCode que desbes probar

Extensiones útiles para VSCode

Truncar texto puede ser muy util en muchas circunstancias, un ejemplo seria en las previews de articulos de un blog.

## - Pero y que es un texto truncado?:

Un texto truncado es un pequeño fragmento recortado de un contenido, ejm:

<PreviewBox previewVisible={true}>
<TruncateText truncateLines="1">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s.
</TruncateText>
</PreviewBox>

Los tres puntos(...) al final del texto representan el truncado, es muy útil cuando queremos mostrar sólo una pequeña parte de un artículo y/o contenido, y si el usuario quiere leer todo el contenido debera seguir el enlace al artículo o un botón para ver más.

---

En `CSS3` hacer este truncamiento es sencillo, aquí te dejo un [breve vídeo](https://www.youtube.com/shorts/e-HBvM7dvIU) sobre cómo truncar texto con `CSS3`.

Sin embargo en [Tailwind CSS](https://tailwindcss.com) no es tan fácil como en `CSS`, pero tampoco es tan difícil, en tailwind hay un plugin oficial de Tailwind CSS que podemos añadir para truncar el texto, en sí es un paquete de npm pero añadimos este paquete como un plugin en la configuración de tailwindcss `(tailwind.config.js)`.

La ventaja de truncar con tailwindcss es que podemos controlar el truncamiento, es decir, si queremos truncar sólo una línea o más líneas de texto podemos hacerlo fácilmente con tailwindcss.

---

## - Instalación y configuración:

El paquete se llama [`@tailwindcss/line-clamp`](https://www.npmjs.com/package/@tailwindcss/line-clamp) y lo podemos encontrar en el gestor de paquetes [npm](https://www.npmjs.com/) o [yarn](https://yarnpkg.com/), lo primero que haremos será instalar este paquete en nuestro proyecto desde nuestra terminal.

```bash:Terminal
npm i @tailwindcss/line-clamp
```

---

Una vez instalado el paquete vamos al archivo `tailwind.config.js`.

```js:./tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}
```

Esta sería la configuración básica de tailwind, nos posicionamos en la parte de `plugins:[]` e importamos nuestro paquete con la sintaxis de [`commonjs`](https://developer.mozilla.org/es/docs/Web/JavaScript/Guide/Modules).

```js:./tailwind.config.js {6}
module.exports = {
  content: ['./src/**/*.{js,ts,jsx,tsx}', './pages/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [require("@tailwindcss/line-clamp")],
}
```

---

Bien eso es todo, ahora solo tenemos que usarlo, vamos al texto y/o párrafo que queremos truncar, y en las clases añadimos la clase line-clamp y el número de líneas a truncar, ejm:

```jsx {1} showLineNumbers
<p className="line-clamp-2">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a
  type specimen book.
</p>
```

<PreviewBox previewVisible={true}>
<TruncateText truncateLines="2">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
  standard dummy text ever since the 1500s.
</TruncateText>
</PreviewBox>

En nuestro caso estamos usando tailwind con jsx, y por esa razon agregamos la clase line-clamp en la `className`, esto depende con lo que estes trabajando por ejm. en HTML5 solo seria `class` y ahi agregas la clase line-clamp.


Como truncar un párrafo o titulo con Tailwind CSS

Truncar texto con Tailwind

En este artículo veremos cómo eliminar eficazmente una rama local y remota con #git.

## - Eliminar rama local:

Para eliminar una rama local ejecuta el siguiente comando,
`git branch -D [branch-name]`, remplaza la `[branch-name]` por el nombre de la rama que deseas eliminar.

> **Nota:** Si intentas eliminar una rama que contiene cambios no fusionados, obtendrás el siguiente error: `error: The branch 'branch_name' is not fully merged. If you are sure you want to delete it, run 'git branch -D [branch-name]'.` Ten en cuenta este error, para saber qué cambios tienes en tu rama que aún no están fusionados, ejecuta el siguiente comando `git branch --no-merged`, esto te mostrará todos los cambios no fusionados en tu propia rama. Si estás seguro de eliminar la rama, entonces tendrás que forzar el borrado con el comando `-D`.

Recuerda que si fuerzas el borrado, todos los cambios que posiblemente no hayan sido fusionados se borrarán por completo.

## - Eliminar rama remota:

Si por alguna razón ya `pusheaste` a github la rama que acabas de borrar localmente, entonces este borrado local no se reflejará en el lado remoto, por lo que es imprescindible ejecutar el siguiente comando para que el lado remoto también borre la rama que hemos borrado localmente: `git push origin --delete [branch-name]`, remplaza la `[branch-name]` por el nombre de la rama que ya borraste en local.

Y listo, tu rama ha sido borrada, para estar seguros de esto, hay diferentes maneras de verificarlo, una de ellas es ejecutar el siguiente comando `git branch`, esto te mostrará una lista completa de tus ramas "locales", o `git branch -r`, este comando te mostrará una lista completa de todas tus ramas en el lado remoto.

Si en estas listas no encuentras la rama que has eliminado, entonces todo ha ido bien, la rama se ha eliminado con éxito, continúa codificando sin más preocupaciones. 🎉

Como eliminar una rama local y remota con git

Borrar rama local y remota en Git

Plataforma web desarrollada de forma integral, orientada a la distribución gratuita de contenido audiovisual cristiano con mas de 319k visitas mensuales.

Interfaz diseñada en [Figma](https://figma.com/) y frontend desarrollado con [Next.js](https://nextjs.org/), [TypeScript](https://www.typescriptlang.org/), [Zustand](https://zustand-demo.pmnd.rs/), [TailwindCSS](https://tailwindcss.com/), [Shadcn/UI](https://ui.shadcn.com/) y [Framer Motion](https://motion.dev/).

Para la gestión del contenido, se implementó un CMS personalizado con [Strapi](https://strapi.io/) y [PostgreSQL](https://www.postgresql.org/), optimizado para la persistencia, actualización eficiente y seguridad de los datos.

La plataforma cuenta con interfaces adaptadas para desktop, dispositivos móviles y Smart TV, priorizando la usabilidad, el rendimiento y la escalabilidad, con caché prolongado de recursos estáticos mediante [Cloudflare](https://www.cloudflare.com/).

esenciadefe.com

esenciadefe-logo.webp

SDA Bible API es una API desarrollada para ofrecer acceso estructurado y eficiente al texto bíblico en la versión Reina-Valera Revisada 1960 (RVR1960), con un enfoque orientado a su uso en aplicaciones cristianas, proyectos educativos y plataformas devocionales.

El objetivo principal del proyecto es facilitar el acceso programático a libros, capítulos y versículos de la Biblia mediante endpoints REST, permitiendo integraciones rápidas y flexibles con interfaces web, móviles o de escritorio.  Su diseño está enfocado en la simplicidad, velocidad y facilidad de despliegue, brindando una base sólida para proyectos que necesiten mostrar, consultar o estudiar la Biblia desde un entorno digital moderno.

Este proyecto está construido con una arquitectura limpia y modular basada en TypeScript y Express, con una base de datos SQLite para almacenar el texto bíblico.

API for accessing the online Bible in the Reina Valera Revisada 1960 (RVR1960) version.

SDA Bible - API

api-logo.webp

Nextjs-Auth-Middleware es un paquete Node.js que proporciona middleware para añadir autenticación mediante clave API con el fin de proteger una ruta API en Next.js. Este paquete se basa en el middleware de Next.js, por lo que te invito a consultar la documentación de Next.js Middleware.

Nextjs-Auth-Middleware is a node.js package that provides middleware that can be used to add API Key authentications to secure an API route in Next.js.

Abraham Calsin

Experiencia

Patrimore

Proyectos

esenciadefe.com

SDA Bible - API

Nextjs Auth Middleware

Artículos

ESLint y Prettier en Next.js y TypeScript

Tema oscuro con Chakra UI en Next.js

Proteger API route con clave en Next.js