#nextjs middleware spams redirection

1 messages · Page 1 of 1 (latest)

abstract heron
#

nextjs spams redirection
code:

export async function middleware(request: NextRequest) {
    console.log("Current URL: ", request.url);
    
    if (request.cookies.has('token')) {
      console.log("Token found, proceeding to the next response...");
      return NextResponse.next();
    } else {
      console.log("Token not found, redirecting to /authentication...");
      return NextResponse.redirect('http://localhost:3000/authentication');
    }
}
misty vaultBOT
#

Hi @abstract heron. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

#

Based on the code you provided, it seems like you're using Next.js middleware to handle authentication. If a token is found in the cookies, the middleware allows the request to proceed. If not, it redirects the user to the /authentication page.

If you're experiencing an issue where the redirection is happening repeatedly, it could be due to a few reasons:

  1. The /authentication page itself might not be setting the token cookie correctly. Ensure that after successful authentication, the token cookie is being set.

  2. The middleware is being applied to the /authentication page as well. This would cause a loop where the middleware redirects to the /authentication page, and then the middleware runs again on this page, causing another redirect. To avoid this, you could add a check in your middleware to skip the authentication check for the /authentication page.

Here's an example of how you could modify your middleware to avoid applying it to the /authentication page:

export async function middleware(request: NextRequest) {
    console.log("Current URL: ", request.url);
    
    // Skip middleware for the /authentication page
    if (request.nextUrl.pathname === '/authentication') {
      return NextResponse.next();
    }

    if (request.cookies.has('token')) {
      console.log("Token found, proceeding to the next response...");
      return NextResponse.next();
    } else {
      console.log("Token not found, redirecting to /authentication...");
      return NextResponse.redirect('<http://localhost:3000/authentication'>);
    }
}

Please note that the code above is based on the information provided in the extracts and may need to be adjusted based on your specific application setup.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@abstract heron kapa.ai is still learning and improving, please let us know how it did by reacting below

abstract heron
#

@misty vault
The page loads but all the functionality and styles are gone, only the html renders

misty vaultBOT
#

Let me check the knowledge base for you. One moment! :books:

#

Based on the information provided in the extracts, there could be a few reasons why your page is only rendering HTML without any styles or functionality:

  1. CSS Importing: Ensure that your CSS is being imported correctly. In Next.js, you can import CSS in your pages/_app.js file. For example:
import '../styles.css'

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

This will apply the styles from styles.css to all pages and components in your application. Remember, due to the global nature of stylesheets, and to avoid conflicts, you may only import them inside pages/_app.js (source (https://nextjs.org/docs/pages/building-your-application/styling/css-modules)).

  1. JavaScript Hydration: Next.js pre-renders every page by default, which means it generates HTML for each page in advance. After a page is loaded by the browser, its JavaScript code runs and makes the page fully interactive. This process is called hydration. If your JavaScript is not running correctly, it could prevent this hydration process, leaving you with just the pre-rendered HTML (source (https://nextjs.org/docs/pages/building-your-application/rendering)).

  2. Client-Side Rendering (CSR): If you're using CSR, keep in mind that it can lead to performance issues for users with slower internet connections or devices, as they need to wait for all the JavaScript to load and run before they can see the full page. If the JavaScript fails to load or run, it could result in a page that only displays the initial empty or loading state (source (https://nextjs.org/docs/pages/building-your-application/rendering/client-side-rendering)).

#

To debug this issue, you could start by checking your browser's console for any error messages. This could give you clues about any issues with loading or running your CSS or JavaScript.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

#

@abstract heron kapa.ai is still learning and improving, please let us know how it did by reacting below

leaden fable
#

You'll need to update your matchers to allow the loading of static files (including styles/assets). Just add this to your middleware :


export const config = {
  matcher: [
    // This is a glob pattern to allow loading of static files (i.e: styling and images)
    "/((?!api|_next/static|_next/image|favicon.ico).*)",
  ],
};