Почему middleware.ts не загружается в асинхронном порядке?

Question

[dima89e]

Вот мой middleware.ts

import { NextRequest, NextResponse } from "next/server";
import { EnumTokens } from "./shared/services/auth-token.service";
import { DASHBOARD_PAGES } from "./shared/config/pages-url.config";

export const middleware = async (request: NextRequest) => {
  const { url, cookies } = request

  const refreshToken = cookies.get(EnumTokens.REFRESH_TOKEN)?.value

  const isAuthPage = url.includes('/register')

  console.log('isAuthPage ', isAuthPage, 'refreshToken  ', refreshToken)
  
  if (isAuthPage && refreshToken) {
    return NextResponse.redirect(new URL(DASHBOARD_PAGES.HOME, url))
  }
  
  if (isAuthPage) {
    return NextResponse.next()
  }
  
  if (!refreshToken) {
    return NextResponse.redirect(new URL('/register', url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: ['/:path*', '/register/:path']
}

B допустим у меня есть 1 страница где есть css файлы, mui стили tailwindcss и т д

import { Metadata } from 'next'
import Register from './Register'

export const metadata: Metadata = {
	title: 'Регистрация',
}

const RegisterPage = () => {
	return <Register />
}

export default RegisterPage


'use client'

import { zodResolver } from '@hookform/resolvers/zod'
import { Button, InputLabel } from '@mui/material'
import { SubmitHandler, useForm } from 'react-hook-form'
import BirthDateInput from '@/shared/components/ui/BirthDateInput'
import EmailInput from '@/shared/components/ui/EmailInput'
import PasswordInput from '@/shared/components/ui/PasswordInput'
import RadioSelect from '@/shared/components/ui/RadioSelect'
import StrokeInput from '@/shared/components/ui/StrokeInput'
import TelInput from '@/shared/components/ui/TelInput'
import { GENDERS } from '@/shared/constants/genders.constants'
import { formatStrokeEmail } from '@/shared/lib/format-stroke-email'
import { registerSchema } from '@/shared/schemas/register.schema'
import { IRegisterForm } from '@/shared/types/auth.types'
import { formatBirthdate } from '@/shared/lib/format-birthdate'

const Register = () => {
  const {
    watch,
    register,
    handleSubmit,
    setValue,
    control,
    formState: { errors }
  } = useForm<IRegisterForm>({
    resolver: zodResolver(registerSchema)
  })
  const birthdate = watch('birthdate')

  const onSubmit: SubmitHandler<IRegisterForm> = (data, e) => {
    e?.preventDefault()

    if (Object.keys(errors).length > 0) return

    const obj = {
      ...data,
      name: data.name.trim(),
      lastName: data.lastName.trim(),
      birthdate: formatBirthdate(data.birthdate),
      email: `${data.email.email}${data.email.domain}`,
    }

    console.log('submit ', obj)
  }

  return (
    <div className='max-w-[600px] mx-auto shadow-normal p-5 mt-10 mb-10'>
      <form onSubmit={handleSubmit(onSubmit)}>
        <h2 className='text-center text-2xl font-bold mb-10'>
          Создание почтового ящика
        </h2>

        <div className='flex flex-col gap-4'>
          <div className='flex gap-4'>
            <StrokeInput
              label='Имя'
              error={!!errors.name}
              helperText={errors.name?.message}
              {...register('name')}
            />
            <StrokeInput
              label='Фамилия'
              error={!!errors.lastName}
              helperText={errors.lastName?.message}
              {...register('lastName')}
            />
          </div>

          <div>
            <InputLabel>Дата рождения</InputLabel>
            <BirthDateInput
              errors={errors}
              register={register}
              values={birthdate}
              setValue={setValue}
            />
          </div>

          <RadioSelect
            label='Пол'
            groups={GENDERS}
            errors={errors}
            control={control}
          />

          <div>
            <InputLabel>Имя ящика</InputLabel>
            <EmailInput
              inputType='default'
              error={!!errors.email}
              helperText={errors.email?.email?.message || errors.email?.domain?.message}
              {...register('email.email')}
              selectProps={{
                error: !!errors.email,
                ...register('email.domain')
              }}
            />
          </div>

          <div>
            <InputLabel>Имя привязанного ящика</InputLabel>
            <StrokeInput
              type='text'
              error={!!errors.linkedEmail}
              helperText={errors.linkedEmail?.message}
              {...register('linkedEmail')}
              onChange={e => {
                e.target.value = formatStrokeEmail(e.target.value)
                register('linkedEmail').onChange(e)
              }}
            />
          </div>

          <div>
            <InputLabel>Номер телефона</InputLabel>
            <TelInput
              register={register}
              errors={errors}
              control={control}
            />
          </div>

          <div style={{ marginTop: '7px' }}>
            <InputLabel>Пароль</InputLabel>
            <PasswordInput
              register={register}
              errors={errors}
            />
          </div>

          <Button
            type='submit'
            variant='contained'
            sx={{ mt: 3 }}
          >
            Создать
          </Button>
        </div>
      </form>
    </div>
  )

};

export default Register;

И на ней ломается верстка когда на нее захожу, я подозреваю что из за того что middleware перебивает загрузку

я также заметил, что именно tailwindcss не подгружается