middleware rewrite and tailwind.css

avmentzer commented 1 year ago

Verify canary release

[X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

latest of all

Which area(s) of Next.js are affected? (leave empty if unsure)

Middleware / Edge (API routes, runtime)

Link to the code that reproduces this issue

none

To Reproduce

create an middleware.ts and make an rewrite if a specific cookie is not there.

`let hasCookie = request.cookies.get('access-cookie')?.value

if (hasCookie) {
    console.log('access granted')
} else {
  rewrite to /login
}

}`

Describe the Bug

The rewrite works, but no css is loading.

Expected Behavior

load tailwind css.

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

JesseKoldewijn commented 1 year ago

Hey there! In the middleware you should ignore requests to the "_next" directory from the rewrite. Not sure if this is the issue at had in your case (due to a lack of info+data+code) but this could be the issue which would end up breaking the css import.

Docs in this regard can be found here: app router: https://nextjs.org/docs/app/building-your-application/routing/middleware pages: https://nextjs.org/docs/pages/building-your-application/routing/middleware

In both cases, scroll down till you see the long regex string in the examples.

yossydev commented 1 year ago

Hello!! I was just facing the same issue!!

In the middleware, you should ignore requests to the “_next” directory from the rewrite https://github.com/vercel/next.js/issues/49826#issuecomment-1548456206

In my environment, using the content that becomes the matcher(https://nextjs.org/docs/app/building-your-application/routing/middleware#matcher) made it possible for TailwindCSS styles to apply!

export const middleware = () => {
  ...etc
}
export const config = {
  matcher: ['/((?!api|_next/static|_next/image|favicon.ico).*)']
};

↑ Try modifying your middeware.ts like this! It should definitely apply the styles correctly!

Have a great development life! 💪🫡

Zaprovic commented 11 months ago

Hello!!

I was facing the same issue as you guys, shoutouts to @JesseKoldewijn because his answer was golden. However, in my case it renders the styles, but not the font family. Maybe some of you had the same issue?

JesseKoldewijn commented 11 months ago

Hello!!

I was facing the same issue as you guys, shoutouts to @JesseKoldewijn because his answer was golden. However, in my case it renders the styles, but not the font family. Maybe some of you had the same issue?

What font are you using and in what way are you importing/referencing it?

Zaprovic commented 11 months ago

@JesseKoldewijn bro I am using the Spotify font. I have the .woff2 files in public/fonts/ folder and I am applying @font-face inside globals.css like this

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
    color-scheme: dark;
}

html {
    font-family: "CircularStd", system-ui, sans-serif;
    background-color: black;
}

@font-face {
    font-family: "CircularStd";
    src: url("/fonts/CircularStd-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CircularStd";
    src: url("/fonts/CircularStd-Book.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CircularStd";
    src: url("/fonts/CircularStd-Light.woff2") format("woff2");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CircularStd";
    src: url("/fonts/CircularStd-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "CircularStd";
    src: url("/fonts/CircularStd-Black.woff2") format("woff2");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

JesseKoldewijn commented 11 months ago

@JesseKoldewijn bro I am using the Spotify font. I have the .woff2 files in public/fonts/ folder and I am applying @font-face inside globals.css like this

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  color-scheme: dark;
}

html {
  font-family: "CircularStd", system-ui, sans-serif;
  background-color: black;
}

@font-face {
  font-family: "CircularStd";
  src: url("/fonts/CircularStd-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularStd";
  src: url("/fonts/CircularStd-Book.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularStd";
  src: url("/fonts/CircularStd-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularStd";
  src: url("/fonts/CircularStd-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "CircularStd";
  src: url("/fonts/CircularStd-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

Have you tried if loading the fonts using next/font/local fixes the issue?

In case helpful, feel free to check out the docs as well where needed:

app router: https://nextjs.org/docs/app/api-reference/components/font
pages: https://nextjs.org/docs/pages/api-reference/components/font

JesseKoldewijn commented 11 months ago

@Zaprovic hey man! Just threw a PR your way on your repo with the local font loader implemented and tested ;) Feel free to take a look 👍

Zaprovic commented 10 months ago

@JesseKoldewijn Thank you dude! I already merged the changes and it worked 😃. I actually did not know nextjs had a module to load local fonts like that

vercel / next.js