Web blog Next.js 15

author
By admin
23 de noviembre de 2025
image

Web blog, creada con Next.js 15, Drizzle, Postgresql, Tailwind CSS y Jodit, un editor web para crear las entradas de blog.


Aqui tenemos una entrada de blog estandar, la aplicacion de blog no tiene subcategorias, solo categorias principales,  que tendremos que crear en la opcion de menu Category.

El editor web utilizado es Jodit, aqui se puede componer el post que guardaremos en la base de datos.




Verify email


Sin verificacion de email, usuario se registra con login y password, ya puede acceder al backend con permisos de USUARIO, con los cuales puede, modificar su información personal, puede crear posts, pero no estan activos(no aparecen en el blog de la web), cambiar su clave, borrar la cuenta, y puede activar two factor.

Con verificación de email, usuario se registra con login y password, en este momento se informa que la cuenta no esta activa mostrando un link, verify your email.



Cuando el usuario presiona el enlace Verify your email, nos muestra esta pantalla



hacemos click en Send mail, enviamos a nuestro email un enlace junto con un token(JWT), tendremos un tiempo determinado en hacer click en el enlace,

Pulsamos en el enlace que nos llega, se abre un navegador y este acccede a la direccion URL del enlace, se muestra un banner informando que la verificacion tuvo exito, se muestra un link a login.


Two Factor Authentication(2FA)


Cada usuario podra activar esta caracteristica desde la opcion de menú Security del Dashboard, cuando lo considere oportuno.



Una vez activada, nos muestra el QR(TOPT) y un secreto de 32 bytes, que pasaremos a secreto.base32 y lo guardaremos en la base de datos.



Desde un autenticador como FreeOTP+, Google Authenticator, escaneamos el QR que tenemos en pantalla, lo necesitaremos para hacer login nuevamente.

Tambien puedes utilizar(esto desde el escritorio), OTPClient que soporta: Time-based One-time Passwords (TOTP) and HMAC-Based One-Time Passwords (HOTP), presionamos [+] y opcion de menu Manually, introducimos el secreto que se muestra por pantalla(Dashboard).

Ahora que tenemos activado two factor, cuando hagamos login nuevamente, utilizaremos el autenticador preferido que nos genera el token necesario.



Manager de posts


Nos muestra todos los posts, si el usuario tiene Rol: ADMIN, si es Rol: USER, solo sus posts. Solo Rol: ADMIN puede activar, modificar y borrar los posts, creados por USER o ADMIN.



Conclusión


Este software es una base de código(Next.js 15.5.4), con diseño full-stack( funcionalidad frontend, backend integrada) y responsivo, solo en los post que muestran código, el responsivo muestra un scroll, se deja así intencionadamente, para que al copiar la configuración permanezca el formato correcto para los servicios del servidor.


En la autenticación se utilizan tokens con Jose(JWS) y OpenPGP, con cifrado parcial del token. Es una beta0.9, pero funcional, es ideal para desarrolladores que inician con Next.js y no quiren empezar de cero.


Otras características


  • Integración de APIs: Django Rest(solo envío de correo)
  • Servidor de correo: Postfix
  • Calidad del código: Buena
  • Seguridad: Media
  • Código IA: 5% (la IA se utilizo al final del proyecto)
  • Orientación IA: 20% - Importante


Algunos módulos utilizados en el proyecto



  • headlessui
  • radix-ui
  • bcryptjs
  • dotenvx
  • jodit-react
  • jose
  • openpgp
  • qrcode
  • speakeasy
  • zod
  • framer-motion


Estructura de Directorio

  • /app
    • (frontend)
    • (login)
    • dashboard

  • /components
  • /lib
  • /public
    ...

 
Share this post :

Subscribe to receive future updates

Lorem ipsum dolor sited Sed ullam corper consectur adipiscing Mae ornare massa quis lectus.

No spam guaranteed, So please don’t send any spam mail.