NextJS 13.4 App Router Middleware Page Redirect Has No Styles

I am using the following middleware to create a redirect if the user is not on the sign-in screen. This is just a test case. Eventually, the condition would check for a valid auth session and conditionally redirect.

However, when the redirect completes, the page has no styles.

This is based on the example from the NextJS documentation example.

export async function middleware(req: NextRequest) {
    if(req.nextUrl.pathname != '/sign-in') {
        return NextResponse.redirect(new URL('/sign-in', req.url))
    }
}

Disabling the middleware (commenting it out), I can load /sign-in without issues. In the "sources" dev tools tab, I see this.

Enabling the middleware shows zero styles (using the default tailwind configuration). It also shows a secondary sign-in document (purple icon) that appears to be recognized as a completely different page. The unstyled page does not appear to be reactive.

I am confused about why this is happening or if there is a better way to create middleware auth-guarding that redirects users to the sign-in page if there is no valid session (or for whatever condition).

Well all it took was me creating this stack overflow question to finally realize the answer myself.

The above redirect path condition was created to avoid a redirect loop during my testing. However, it is flawed because it redirects EVERY request to /sign-in including the styles.

I'll leave this up in case anyone makes this stupid mistake.

Redirect Only Specific Paths

In the event you do want to conditionally redirect from one path to another without screwing up everything, you can follow the full example and include the matcher config for the middleware.

export const config = {
    matcher: '/about/:path*',
};

However, this limits the capabilities of your entire middleware system to this config.

Prevent NextJS 13 App Router middleware from running on static files

If you want to just stop Middleware from running on static files (such as your styles and fonts), you can use this config:

// Stop Middleware running on static files
export const config = { matcher: '/((?!.*\\.).*)' }