Working on my first project using NextJS, I'm curious about the proper approach to managing dynamic routing.
I've set up a http://localhost:3000/trips route that shows a page with a list of cards representing different "trips":
https://i.stack.imgur.com/8o9td.png
When clicking on one of these cards, I want to navigate to a dynamic page for that specific trip, such as
http://localhost:3000/trips/0b68a50a-8377-4720-94b4-fabdabc12da1This is my folder structure:
https://i.stack.imgur.com/87Cn4.png
We already have the dynamic routes set up and they are functioning properly.
The TripCard component represents each card. The TripComponent displays a grid of TripCards. trips/index.tsx contains the TripsComponent (along with other UI components).
Currently, I handle the dynamic route in TripCard as follows:
import { Trip } from './Models'
import { useRouter } from 'next/router'
const TripCard = ({ trip }: { trip: Trip }) => {
const router = useRouter()
return (
<div className="card bg-base-100 shadow-xl hover:bg-gray-100 active:bg-gray-300">
<div className="card-body" onClick={() => router.push('/trips/' + trip.id)}>
<h2 className="card-title">{trip.name}</h2>
<p>This is a trip!</p>
</div>
</div>
)
}
export default TripCard
The dynamic page [tripId].tsx looks like this:
import { NextPage } from 'next'
import { useRouter } from 'next/router'
const TripPage: NextPage = () => {
const router = useRouter()
const tripId = router.query.tripId
return (
<div>
<h1>This is {tripId}</h1>
</div>
)
}
export default TripPage
And here's TripsComponent.tsx:
import { Trip } from './Models'
import TripCard from './TripCard'
const TripsComponent = ({ trips }: { trips: Trip[] }) => {
return (
<div>
<div className="grid grid-cols-4 gap-4">
{trips.map((trip: Trip) => (
<div>
<TripCard trip={trip}></TripCard>
</div>
))}
</div>
</div>
)
}
export default TripsComponent
And trips/index.tsx:
import axios from 'axios'
import { GetStaticProps, InferGetStaticPropsType, NextPage } from 'next'
import { Trip } from '../../components/Models'
import TripsComponent from '../../components/TripsComponent'
const TripsPage: NextPage = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
return (
<div className="m-9">
<h1 className="mt-9 text-3xl font-bold text-slate-800">Your Trips</h1>
<div className="justify-end">
<button className="btn btn-primary">Add Trip</button>
</div>
<div className="divider"></div>
<TripsComponent trips={props.data} />
</div>
)
}
export const getStaticProps: GetStaticProps = async () => {
// fetches data and passes to props
}
export default TripsPage
My concern is about the best practice for handling routing where cards lead to dynamic URLs with associated pages. Currently, in TripCard, I have a hardcoded router.push:
<div className="card-body" onClick={() => router.push('/trips/' + trip.id)}>However, this method may not be the most efficient. For instance, what if I need to utilize TripCard in another view with a different route?
What would be the ideal way to organize code to achieve this functionality in NextJS?