Cómo implementar Clerk en Nextjs para autenticación de usuarios

Aprende a integrar Clerk en Next.js de forma sencilla. Configura login, registro y rutas protegidas con esta guía práctica y completa para tu aplicación Next.js

Escrito por oscar 16 March 2025 1 0

NextJS

En el desarrollo moderno de aplicaciones web, una de las prioridades es implementar una autenticación robusta, segura y fácil de integrar. Clerk es una de las mejores opciones para Next.js, ya que ofrece una solución completa para autenticación de usuarios, gestión de sesiones y mucho más, sin complicarte con la infraestructura de backend. En este artículo, te enseñaré paso a paso cómo integrar Clerk en un proyecto de Next.js para tener un sistema de login y registro funcionando en minutos.

Antes de iniciar recomiendo que veas

Cómo instalar y usar NVM para gestionar versiones de Node.js en Ubuntu y Windows
NextJs
https://clerk.com/docs/quickstarts/nextjs Esta es la documentación ofician en donde nos estaremos guiando.

Configura Clerk

Crea una cuenta en Clerk, donde vamos a crear una nueva cuenta https://dashboard.clerk.com/sign-up

Dentro de Clerk, crea una nueva aplicación, donde indicaremos el nombre y las opciones de autenticación:

Luego, en la aplicacion vamos a buscar las api keys en configuración > api keys:

Donde seleccionamos que se usaran en NextJs, procedemos a copiarlas

Instalación de Clerk

Primero, asegúrate de tener un proyecto Next.js creado.

Nota: Si aun no ha creado el proyecto en NextJS, en este post http://codigoelectronica.com/blog/nextjs explicamos el paso a paso

Luego instala Clerk, con el siguiente comando:

npm install @clerk/nextjs

Configura las variables de entorno

En el proyecto, vamos a crear un archivo llamado `.env` en donde colocaremos las llaves creadas en clerk.

NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_c3RpbGwtZ******************************
CLERK_SECRET_KEY=sk_test_m4PWl******************************

Agrega ClerkProvider en `layout.tsx`

En tu archivo src/app/layout.tsx, envuelve tu aplicación con <ClerkProvider>, debe quedar de la siguiente forma:

import { ClerkProvider } from '@clerk/nextjs';

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <ClerkProvider>
      <html lang="en">
        <body>
          {children}
        </body>
      </html>
    </ClerkProvider>
  );
}

Middleware para rutas protegidas

Si quieres proteger todas las rutas de Next.js a nivel de middleware:

Lo vamos a crear dentro de la ruta `/src` y el nombre debe ser `middleware.ts`

import { clerkMiddleware, createRouteMatcher, ClerkMiddlewareAuth } from "@clerk/nextjs/server";

const isPublicRoute = createRouteMatcher(['/', '/blog(.*)', '/sign-in(.*)', '/sign-up(.*)'])


export default clerkMiddleware(async (auth, request) => {
  if (!isPublicRoute(request)) {
    await auth.protect()
  }
})

export const config = {
  matcher: [
    // Skip Next.js internals and all static files, unless found in search params
    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest|json)).*)',
    // Always run for API routes
    '/(api|trpc)(.*)',
  ],
};

Crear las pantallas de inicio de sesion y cierre de sesion

Primero procedemos a crear los directorios correspondientes a la autenticación, estos lo creamos dentro de src\app:

├───(auth)
│   └───(routes)
│       ├───sign-in
│       │   └───[[...sign-in]]
│       └───sign-up
│           └───[[...sign-up]]

Luego procedemos a crear el layout para routes, esto lo hacemos en src\app\(auth)\(routes)\layout.tsx

export default function LayoutAuth({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <div className="flex flex-col justify-center h-full items-center">
      {children}
    </div>
  )
}

Con lo anterior tenemos las rutas base para crear las vistas de inicio y cierre de sessión.

Inicio de sesion

En la siguiente directorio creamos el page.tsx: src\app\(auth)\(routes)\sign-in\[[...sign-in]]\page.tsx

import { SignIn } from '@clerk/nextjs'

export default function Page() {
  return <SignIn />
}

Ingresamos a la ruta: http://localhost:3000/sign-in

Cerrar sesión

Crear el page.tsx en src\app\(auth)\(routes)\sign-up\[[...sign-up]]\page.tsx

import { SignUp } from '@clerk/nextjs'

export default function Page() {
  return <SignUp />
}

Crear Dashboard

Para realizar una prueba de inicio de sesion, creamos un page en src\app\(routes)\dashboard\page.tsx

export default function DashBoardPage() {
  return (
    <div>DashBoardPage</div>
  )
}

Iniciamos sesion con clerk, donde redireccionara al dashboard creado.