Next.js middleware for authentication and redirects

<p>Need to protect certain routes in Next.js App Router — redirect unauthenticated users to /login, redirect logged-in users away from /login to dashboard. Doing this in each page component leads to flash of protected content.</p>

<p>Use Next.js Middleware to intercept requests before they reach page components:</p> <div class="highlight"><pre><span></span><code><span class="c1">// middleware.ts (at project root, next to app/)</span> <span class="k">import</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NextResponse</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'next/server'</span><span class="p">;</span> <span class="k">import</span><span class="w"> </span><span class="kr">type</span><span class="w"> </span><span class="p">{</span><span class="w"> </span><span class="nx">NextRequest</span><span class="w"> </span><span class="p">}</span><span class="w"> </span><span class="kr">from</span><span class="w"> </span><span class="s1">'next/server'</span><span class="p">;</span> <span class="c1">// Routes that require authentication</span> <span class="kd">const</span><span class="w"> </span><span class="nx">PROTECTED_ROUTES</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s1">'/dashboard'</span><span class="p">,</span><span class="w"> </span><span class="s1">'/traces/new'</span><span class="p">,</span><span class="w"> </span><span class="s1">'/settings'</span><span class="p">];</span> <span class="c1">// Routes that logged-in users shouldn't see</span> <span class="kd">const</span><span class="w"> </span><span class="nx">AUTH_ROUTES</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[</span><span class="s1">'/login'</span><span class="p">,</span><span class="w"> </span><span class="s1">'/signup'</span><span class="p">];</span> <span class="k">export</span><span class="w"> </span><span class="kd">function</span><span class="w"> </span><span class="nx">middleware</span><span class="p">(</span><span class="nx">request</span><span class="o">:</span><span class="w"> </span><span class="kt">NextRequest</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">token</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">request</span><span class="p">.</span><span class="nx">cookies</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'session-token'</span><span class="p">)</span><span class="o">?</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">pathname</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">request</span><span class="p">.</span><span class="nx">nextUrl</span><span class="p">.</span><span class="nx">pathname</span><span class="p">;</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">isProtected</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">PROTECTED_ROUTES</span><span class="p">.</span><span class="nx">some</span><span class="p">(</span><span class="nx">route</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">pathname</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="nx">route</span><span class="p">));</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">isAuthRoute</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">AUTH_ROUTES</span><span class="p">.</span><span class="nx">some</span><span class="p">(</span><span class="nx">route</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="nx">pathname</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="nx">route</span><span class="p">));</span> <span class="w"> </span><span class="c1">// Redirect unauthenticated users from protected routes</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">isProtected</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="o">!</span><span class="nx">token</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">loginUrl</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="ow">new</span><span class="w"> </span><span class="nx">URL</span><span class="p">(</span><span class="s1">'/login'</span><span class="p">,</span><span class="w"> </span><span class="nx">request</span><span class="p">.</span><span class="nx">url</span><span class="p">);</span> <span class="w"> </span><span class="nx">loginUrl</span><span class="p">.</span><span class="nx">searchParams</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'redirect'</span><span class="p">,</span><span class="w"> </span><span class="nx">pathname</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">NextResponse</span><span class="p">.</span><span class="nx">redirect</span><span class="p">(</span><span class="nx">loginUrl</span><span class="p">);</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="c1">// Redirect authenticated users away from login/signup</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">isAuthRoute</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">token</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">redirect</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">request</span><span class="p">.</span><span class="nx">nextUrl</span><span class="p">.</span><span class="nx">searchParams</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="s1">'redirect'</span><span class="p">)</span><span class="w"> </span><span class="o">??</span><span class="w"> </span><span class="s1">'/dashboard'</span><span class="p">;</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">NextResponse</span><span class="p">.</span><span class="nx">redirect</span><span class="p">(</span><span class="ow">new</span><span class="w"> </span><span class="nx">URL</span><span class="p">(</span><span class="nx">redirect</span><span class="p">,</span><span class="w"> </span><span class="nx">request</span><span class="p">.</span><span class="nx">url</span><span class="p">));</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="c1">// Add auth header for API routes that need user context</span> <span class="w"> </span><span class="k">if</span><span class="w"> </span><span class="p">(</span><span class="nx">pathname</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s1">'/api/'</span><span class="p">)</span><span class="w"> </span><span class="o">&amp;&amp;</span><span class="w"> </span><span class="nx">token</span><span class="p">)</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">response</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="nx">NextResponse</span><span class="p">.</span><span class="nx">next</span><span class="p">();</span> <span class="w"> </span><span class="nx">response</span><span class="p">.</span><span class="nx">headers</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="s1">'X-User-Token'</span><span class="p">,</span><span class="w"> </span><span class="nx">token</span><span class="p">);</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">response</span><span class="p">;</span> <span class="w"> </span><span class="p">}</span> <span class="w"> </span><span class="k">return</span><span class="w"> </span><span class="nx">NextResponse</span><span class="p">.</span><span class="nx">next</span><span class="p">();</span> <span class="p">}</span> <span class="c1">// Config: which paths middleware runs on (avoid static files)</span> <span class="k">export</span><span class="w"> </span><span class="kd">const</span><span class="w"> </span><span class="nx">config</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">{</span> <span class="w"> </span><span class="nx">matcher</span><span class="o">:</span><span class="w"> </span><span class="p">[</span> <span class="w"> </span><span class="s1">'/((?!_next/static|_next/image|favicon.ico|public).*)'</span><span class="p">,</span> <span class="w"> </span><span class="p">],</span> <span class="p">};</span> </code></pre></div> <p>Middleware runs on the Edge runtime — no Node.js APIs, no database access. Use it only for routing decisions based on cookies/headers. For JWT validation, verify the token signature (edge-compatible JWT library like <code>jose</code>). Heavy auth logic (database lookups) goes in route handlers, not middleware.</p>