Routing in Next.js and Vite


Routing in Next.js is based on the file system, while Vite uses a more traditional configuration-based approach. Here's how to create a new route in both frameworks.

Adding a New Route in Next.js

Create a file under the pages directory. The file path becomes the URL path.

For example, adding

src/pages/about.tsx
will create a route for
/about
.

Linking to the New Route

Use the

<Link>
component from Next.js or the custom
<RouterLink>
for linking:

1import React from 'react'; 2import { Button } from '@mui/material'; 3import { RouterLink } from 'src/components/base/router-link'; 4import { routes } from 'src/router/routes'; 5import Head from 'next/head'; 6import { Box } from '@mui/system'; 7 8const ComponentsPage = () => { 9 return ( 10 <> 11 <Head> 12 <title>Components</title> 13 </Head> 14 <Box 15 display="flex" 16 justifyContent="center" 17 alignItems="center" 18 minHeight="100vh" 19 > 20 <Button 21 size="large" 22 variant="contained" 23 component={RouterLink} 24 href={routes.components.index} 25 > 26 Browse components 27 </Button> 28 </Box> 29 </> 30 ); 31}; 32 33export default ComponentsPage; 34
Differences in Vite

Vite requires a router configuration. Define your routes in a configuration file and use them with a router-view component.

A new route in Vite would be added to the routes array in the configuration file, and you'd link to it using a router-link component.