Nextjs Middleware to redirect

Hi I want to redirect this route / to /dashboard for that I created a middleware.ts inside src

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  if (req.nextUrl.pathname === '/') {
    return NextResponse.redirect('/dashboard')
  }
}

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'

export function middleware(req: NextRequest) {
  if (req.nextUrl.pathname === '/') {
    return NextResponse.redirect('/dashboard')
  }
}

If I access / now I get this error

Error: URLs is malformed. Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls

Error: URLs is malformed. Please use only absolute URLs - https://nextjs.org/docs/messages/middleware-relative-urls

What am I missing?

4 Replies

Unknown User•3y ago

Message Not Public

utdevOP•3y ago

Also tried this without success in the config file

/**
 * Don't be scared of the generics here.
 * All they do is to give us autocompletion when using this.
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(nextConfig) {
  const webpack = nextConfig.webpack
  nextConfig.webpack = (config, options) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })
    // Preserve custom webpack config
    return typeof webpack === 'function' ? webpack(config, options) : config
  }
  return nextConfig
}

export default defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone',
  images: {
    domains: ['cdn.discordapp.com'],
  },
  redirect: [
    {
      source: '/',
      destination: '/dashboard',
      permanent: true,
    },
  ]
})

/**
 * Don't be scared of the generics here.
 * All they do is to give us autocompletion when using this.
 *
 * @template {import('next').NextConfig} T
 * @param {T} config - A generic parameter that flows through to the return type
 * @constraint {{import('next').NextConfig}}
 */
function defineNextConfig(nextConfig) {
  const webpack = nextConfig.webpack
  nextConfig.webpack = (config, options) => {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })
    // Preserve custom webpack config
    return typeof webpack === 'function' ? webpack(config, options) : config
  }
  return nextConfig
}

export default defineNextConfig({
  reactStrictMode: true,
  swcMinify: true,
  output: 'standalone',
  images: {
    domains: ['cdn.discordapp.com'],
  },
  redirect: [
    {
      source: '/',
      destination: '/dashboard',
      permanent: true,
    },
  ]
})

@dqbd going to try that did not work i put the middleware.ts inside /src/pages right?

Unknown User•3y ago

Message Not Public

utdevOP•3y ago

still same issue, even if I log something in the middleware I get no response in my logs think it works now, not sure if it was a cache issue, thanks 😄

Gaming

Programming

Nextjs Middleware to redirect