How to deploy a React Router 7 site to Netlify

As strange as it may sound, the next iteration of the Remix web framework is React Router 7.

The Remix framework and the React Router library have converged in a single package that can be used either as a full framework (as with Remix) or as a simple routing library (as with previous versions of React Router).

It also adds support for pre-rendering static pages and brings along a number of significant improvements to routing type safety and flexibility.

Keep reading to find out how to upgrade your Netlify site or deploy a new app.

#How to upgrade to React Router 7

Most apps will be able to upgrade seamlessly with the provided codemod, but be sure to follow the appropriate official migration guide:

• Follow this guide if you’re upgrading from React Router 6.
• Follow this guide if you’re upgrading from Remix 2.
  • Make sure you’ve already moved over to Remix Vite beforehand. If you haven’t yet, we have a guide for that too!

Then, replace the Netlify Remix plugin in your project’s Vite config with the Netlify React Router plugin:

npm uninstall @netlify/remix-adapter
npm --save-dev install @netlify/vite-plugin-react-router

npm uninstall @netlify/remix-edge-adapter @netlify/remix-runtime
npm --save-dev install @netlify/vite-plugin-react-router

import { reactRouter } from '@react-router/dev/vite'
import { defineConfig } from 'vite'
import tsconfigPaths from 'vite-tsconfig-paths'
import {netlifyPlugin} from '@netlify/remix-adapter/plugin'
import netlifyPlugin from '@netlify/vite-plugin-react-router'

export default defineConfig({
  plugins: [
    reactRouter(),
    tsconfigPaths(),
    netlifyPlugin(),
  ],
})

import { reactRouter } from '@react-router/dev/vite'
import {netlifyPlugin} from '@netlify/remix-adapter/plugin'
import netlifyPlugin from '@netlify/vite-plugin-react-router'

export default {
  plugins: [
    reactRouter(),
    netlifyPlugin(),
  ],
}

Finally, update your netlify.toml as follows. (If you don’t have one, you can create one with these contents.)

[build]
command = "react-router build"
publish = "build/client"

[dev]
command = "react-router dev"

Then, deploy your site to Netlify as usual.

That’s it. Check out our other Remix guides to learn more about caching, e-commerce, image optimization, and more.

#How to deploy a new React Router 7 site to Netlify

To deploy a new React Router 7 site to Netlify or move an existing site to Netlify, you can link your repository to automatically build and deploy your app (recommended), or you can deploy manually from the command line.

npm i -g netlify-cli@latest

To link your site and deploy from the command line, first link your site:

netlify init

As long as you’re using the latest netlify-cli (17.38.1 or later), Netlify will automatically detect that it is a React Router 7 and configure your site appropriately. (If you choose to configure this manually, see the netlify.toml changes described above.)

You can then deploy your site by running:

netlify deploy --build

Alternatively, you can link your repository in the Netlify UI to set up continuous deployment.

That’s it. Check out our other Remix guides to learn more about caching, e-commerce, image optimization, and more.

#Get started

Try it

To get started with React Router 7 on Netlify quickly, you can also clone and deploy a starter template for exploring and experimenting with just a few clicks. Use the button below to dive right in.

Check out the React Router on Netlify docs for more.