19 Mejores Extensiones y Complementos de Código Abierto para Mejorar su Aplicación con Next.js

Next.js es un marco de desarrollo web basado en React que permite a los desarrolladores crear aplicaciones React renderizadas en el lado del servidor. Es un marco de código abierto construido sobre Node.js, React y webpack. Next.js ofrece muchas características, incluyendo división automática de códigorenderizado del lado del servidor, optimización estática automática, captación previa de rutas y más.

Los complementos y extensiones de Next.js son paquetes que se pueden instalar para ampliar la funcionalidad de una aplicación Next.js. Estos complementos y extensiones se pueden utilizar para agregar funciones como preprocesamiento de CSS, optimización de activos estáticos y más. Son de código abierto y se pueden instalar fácilmente usando npm.

El uso de extensiones de código abierto en aplicaciones Next.js ofrece varios beneficios. En primer lugar, puede ahorrar tiempo y esfuerzo a los desarrolladores al permitirles utilizar soluciones preexistentes en lugar de crear todo desde cero. Además, el uso de extensiones de código abierto puede mejorar la calidad de un proyecto al brindar acceso al código que ha sido revisado y mejorado por la comunidad.

Finalmente, las extensiones de código abierto pueden proporcionar una manera para que los desarrolladores contribuyan a la comunidad y retribuyan a la comunidad de desarrollo en general.

En general, los complementos y extensiones de Next.js ofrecen una forma poderosa de ampliar la funcionalidad de las aplicaciones Next.js y pueden brindar muchos beneficios para desarrolladores y proyectos.

1- Siguiente.js SEO

Next SEO es un complemento que facilita la gestión de su SEO en proyectos Next.js. Es fácil de instalar y admite OpenGraph, JSON-LD, configura páginas sin índice, URL canónicas, URL alternativa, No-Follow y más.

NextSeo funciona incluyéndolo en páginas donde le gustaría que se agreguen atributos de SEO. Una vez incluido en la página, le pasa un objeto de configuración con las propiedades SEO de la página. Esto se puede generar dinámicamente a nivel de página o, en algunos casos, su API puede devolver un objeto SEO.

2- Graphql

Próximo complemento para archivos .graphql y .gql usando Graphql-tag

3- Detector de idioma universal

Detector de idioma que funciona universalmente (navegador + servidor): diseñado para usarse con un marco universal, como Next.js.

4- Generador de mapas del sitio

Foto de Myriam Jessier / Unsplash

Generador de mapas de sitio para next.js. Genere mapas de sitio y robots.txt para todas las páginas estáticas/preprocesadas/dinámicas/del lado del servidor.

next-sitemap requiere un archivo de configuración básico (next-sitemap.config.js) debajo de la raíz de su proyecto:

/** @type {import('next-sitemap').IConfig} */
module.exports = {
siteUrl: process.env.SITE_URL || 'https://example.com',
generateRobotsTxt: true, // (optional)
// ...other options
}

5- agente de siguiente usuario

next-useragent analiza las cadenas de agente de usuario del navegador para next.js

6- siguiente-blog-mdx

next-mdx-blog le permite agregar fácilmente un blog a cualquier next.js proyecto basado.

Características:

• Blog MDX
• RSS Feed
• Configuración sencilla
• Representación personalizable

7- siguiente-i18siguiente

La forma más sencilla de traducir sus aplicaciones Next.js (con configuración de páginas). Si está utilizando Next.js 13 con el directorio de aplicaciones, no es necesario next-i18next, puede usar directamente i18next y react-i18next, como se describe en esta publicación de blog.

8- Siguiente.img

1. https://github.com/humaans/next-img/

9- SiguienteAuth.js

NextAuth.js es una solución completa de autenticación de código abierto para aplicaciones Next.js.

Está diseñado desde cero para admitir Next.js y Serverless.

10- Middleware de rutas siguientes

Enrutamiento Lambda universal para la aplicación Next.js.

Características destacadas:

• Reproducir exactamente next.js La configuración de Now V2 se desarrollará localmente.
• Admite expresiones regulares con nombre utilizadas en routes.
• Permitir el manejo de rutas personalizadas con todos los métodos http de Express.js.
• Enrutamiento del lado del cliente
• Compilando a la configuración JSON compatible con Now V2

11- Componente Next.js sin servidor

Esta extensión le permite implementar sus aplicaciones Next.js en AWS Lambda@Edge a través de componentes sin servidor.

Características incluidas:

• Páginas renderizadas del lado del servidor en Edge. Las páginas que necesitan computación del lado del servidor para renderizarse están alojadas en Lambda@Edge. El componente se encarga de todo el enrutamiento por usted, por lo que no es necesaria ninguna configuración. Debido a que el procesamiento ocurre en las ubicaciones de borde de CloudFront, ¡la latencia es muy baja!
• Rutas API. De manera similar a las páginas representadas del lado del servidor, las solicitudes de API también se atienden desde las ubicaciones del borde de CloudFront mediante Lambda@Edge.
• Páginas dinámicas/segmentos de ruta.
• Coge todas las rutas.
• Prerenderizado automático. Las páginas estáticamente optimizadas compiladas por next se sirven desde ubicaciones perimetrales de CloudFront con baja latencia y costo.
• Activos del cliente. Recursos de compilación de Next.js /_next/* servido desde CloudFront.
• Carpetas estáticas/públicas del usuario. Cualquiera de sus activos en las carpetas estáticas o públicas se carga en S3 y se sirve desde CloudFront automáticamente.
• Suscríbase a la generación estática (SSG) a través de getStaticProps.
• Suscríbase a la representación del lado del servidor (SSR) a través de getServerSideProps.
• Generar estáticamente un conjunto de rutas a partir de fuentes dinámicas a través de getStaticPaths.
• Camino básico
• Modo de vista previa
• Opcional tomar todas las rutas.
• Redirecciones.
• Reescribe.
• Encabezados personalizados.
• Optimización de imagen
• Localización de Next.js 10.
• Regeneración estática incremental.
• Características de Next.js 12

12- próxima sesión

Middleware de sesión ligero basado en promesas para Next.js. También funciona en micro o Node.js HTTP Server, Express y más.

Consulte también alternativas como next-iron-session. Eche un vistazo a nextjs-mongodb-app para ver este módulo en uso.

13- sesión de hierro

Utilidad de sesión sin estado de Node.js que utiliza cookies firmadas y cifradas para almacenar datos. Funciona con servidores HTTP Next.js, Express y Node.js.

Los datos de la sesión se almacenan en cookies cifradas (“sellos”). Y sólo su servidor puede decodificar los datos de la sesión. No hay identificadores de sesión, lo que hace que las sesiones de hierro sean “sin estado” desde el punto de vista del servidor.

14- Extensión PWA de configuración cero

Este complemento funciona con neceser de costura y otro paquete similar para generar una aplicación altamente utilizable en modo PWA.

Sus características incluyen:

• 0⃣ Configuración cero para registrar y generar trabajador de servicio
• Precaché optimizado y caché en tiempo de ejecución
• Maximizar la puntuación del faro
• Ejemplos fáciles de entender
• Soporte completamente fuera de línea con ejemplo de alternativas
• Utilice workbox y workbox-window v6
• Trabaje con cookies listas para usar
• Solicitudes de rango predeterminado para audios y videos
• No se necesita un servidor personalizado para Next.js 9+
• Optar por gestionar eventos del ciclo de vida de PWA.
• Trabajador personalizado para ejecutar código adicional con división de código y mecanografiado apoyo.
• Variables de entorno público disponibles en el trabajador personalizado como de costumbre
• Trabajador del servicio de depuración con confianza en el modo de desarrollo sin almacenamiento en caché
• Internacionalización (también conocida como I18N) con next-i18next
• Configurable mediante las mismas opciones de configuración de la caja de trabajo para GenerateSW e InjectManifest
• Pon en marcha un GitPod y prueba ejemplos a velocidad de cohete
• Admite blitz.js (simplemente agréguelo a blitz.config.js)
• Precaching (experimental) .module.js cuando next.config.js tiene experimental.modern ajustado a true.

15- Siguiente implementación

Implementación sin esfuerzo en AWS y GitHub Pages para aplicaciones Next.js .

Características destacadas:

• implementación sin esfuerzo en páginas de AWS y GitHub
• implementaciones en un dominio personalizado
• generación estática (SSG), renderizado del lado del servidor (SSR)
• Arquitectura AWS sin servidor que sirve su contenido Next.js globalmente a través de CloudFront y Lambda@Edge
• soporte multiambiente

dieciséis- siguiente desconectado

Usar Neceser de costura con Siguiente.js ¡Y habilite fácilmente la funcionalidad sin conexión en su aplicación!

17- próximos temas

Con este paquete, puede agregar compatibilidad con temas a sus aplicaciones Next.js que incluyen muchas funciones:

• Modo oscuro perfecto en 2 líneas de código
• Configuración del sistema con esquema de color preferido
• Interfaz de usuario del navegador temática con combinación de colores
• Soporte para Next.js 13 appDir
• Sin flash en carga (tanto SSR como SSG)
• Sincronizar tema entre pestañas y ventanas
• Desactiva el parpadeo al cambiar de tema
• Forzar páginas a temas específicos
• Selector de atributos de clase o datos
• useTheme gancho

18- siguiente sin usar

Este paquete le permite encontrar archivos no utilizados en su proyecto Next.js.

19- MDSIGUIENTE

mdnext es un ecosistema de herramientas para potenciar el trabajo con NextJS + MDX.

El mdnext CLI muestra una colección de plantillas mantenidas oficialmente y enviadas por la comunidad para elegir. Una vez elegido, el proyecto se clona localmente con un historial de confirmaciones limpio y estará listo para construir su próximo proyecto.

@mdnext/components ofrece componentes accesibles (gracias ChakraUI) y extensibles para trabajar con MDX. Estos incluyen cosas que has visto como Code componentes para diseñar bloques de código o Iframes para incorporar contenido enriquecido a MDX

El mdnext La colección de plantillas son proyectos basados ​​en NextJS con opiniones sobre cómo diseñar, manejar MDX (y otras fuentes de datos), entregar medios y manejar sus flujos de trabajo más habituales (ecomm/blogs/páginas de productos).

Si bien existe una colección de plantillas mantenida oficialmente, me entusiasmó ver y compartir lo que la comunidad ha creado. Sé que hay muchas opiniones y comodidades diferentes como desarrollador web y quiero que nuestro ecosistema sea accesible.

Ofrece varios iniciadores oficiales y comunitarios para crear sus aplicaciones MDNEXT.

Etiquetas

Next.js Desarrollo de código abierto Biblioteca Frameworks JavaScript Lista de TypeScript Desarrollo web basado en web