Redirects

Imagine you want users to enter the URL /@drake, and for it to redirect to the page at /artists/[slug].tsx.

Next.js lets you handle this easily with redirects and rewrites inside of next.config.js

js
// next.config.js
 
module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:slug',
        destination: '/artists/:slug',
      },
    ]
  },
}

js
// next.config.js
 
module.exports = {
  async rewrites() {
    return [
      {
        source: '/@:slug',
        destination: '/artists/:slug',
      },
    ]
  },
}

The issue is, this won't work out of the box with React Navigation.

In order to achieve the same, we'll need to edit the React Navigation linking config.

tsx
import * as Linking from 'expo-linking'
import { getStateFromPath, LinkingOptions } from '@react-navigation/native'
 
const withRewrites = (unparsedPath: string): string => {
  if (unparsedPath.startsWith('/@')) {
    const slug = unparsedPath.replace('/@', '').split('?')[0].split('/')[0]
    const rest = unparsedPath.replace(`/@${slug}`, '')
 
    return `/artists/${slug}${rest}`
  }
 
  // you can put other redirects here
 
  return unparsedPath
}
 
const linking: LinkingOptions<ReactNavigation.RootParamList> = {
  // ...your linking config
  prefixes: [Linking.createURL('/'), 'https://fernandorojo.co'],
  getStateFromPath(path, config) {
    const finalPath = withRewrites(path)
 
    return getStateFromPath(finalPath, config)
  },
}

tsx
import * as Linking from 'expo-linking'
import { getStateFromPath, LinkingOptions } from '@react-navigation/native'
 
const withRewrites = (unparsedPath: string): string => {
  if (unparsedPath.startsWith('/@')) {
    const slug = unparsedPath.replace('/@', '').split('?')[0].split('/')[0]
    const rest = unparsedPath.replace(`/@${slug}`, '')
 
    return `/artists/${slug}${rest}`
  }
 
  // you can put other redirects here
 
  return unparsedPath
}
 
const linking: LinkingOptions<ReactNavigation.RootParamList> = {
  // ...your linking config
  prefixes: [Linking.createURL('/'), 'https://fernandorojo.co'],
  getStateFromPath(path, config) {
    const finalPath = withRewrites(path)
 
    return getStateFromPath(finalPath, config)
  },
}