`+redirects`

Environment: server

Record<string, string>

Provided by: vike

See also:

Permanent redirections (HTTP status code 301):

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  redirects: {
    // Internal
    '/about-us': '/about',
    '/products/computer': '/produkte/komputer',
 
    // External
    '/chat': 'https://discord.com/invite/hfHhnJyVg8',
    '/mail': 'mailto:some@example.com',
    '/download': 'magnet:?xt=urn:btih:example',
 
    // Parameterized redirections
    '/product/@id': '/buy/@id',
 
    // Glob
    '/admin/*': '/private/*',
 
    // Glob + external
    '/admins/*': 'https://admin.example.org/*',
  }
} satisfies Config

Alias

You can also use the redirects setting to alias links:

// pages/+config.ts
 
import type { Config } from 'vike/types'
 
export default {
  redirects: {
    '/mail': 'mail@example.org',
    '/donate': 'https://donate.stripe.com/9aiUAh021a',
    '/chat': 'https://discord.com/invite/hfHhnJyVg8'
  }
} satisfies Config

By default, these aliases only work when your share them on third-party websites (e.g. if you share https://my-website.com/chat on Discord or GitHub).

If you want to use these aliases also on your website, then update your <Link> implementation as shown below.

// components/Link/aliases.ts
 
export const aliases = {
  '/mail': 'mail@example.org',
  '/donate': 'https://donate.stripe.com/9aiUAh021a',
  '/chat': 'https://discord.com/invite/hfHhnJyVg8'
}

// components/Link.ts
 
import { aliases } from './Link/aliases'
 
function Link({ href }: { href: string }) {
  if (aliases[href]) href = aliases[href]
  // ...
}

// pages/+config.ts
 
import type { Config } from 'vike/types'
import { aliases } from '../components/Link/aliases'
 
export default {
  redirects: {
    ...aliases
  }
} satisfies Config

As explained at Client navigation, the redirects setting doesn't work upon client-side navigation, that's why you have to implement it yourself on the client-side.

See also: #2376 - Setting +redirects improve alias support.

Pre-rendering

See API > +prerender > redirects.

The +redirects setting doesn't apply to client-side navigation.

To save client-side KBs, the +redirects setting isn't loaded on the client.

The +redirects setting is primarily intended for redirecting links living on external websites (third-party websites you don't control and can't update) that point to deprecated URLs.

Make sure to update internal links within your own website so they don't point to deprecated URLs.