Routing

Basic Routing

Single routing = pages/course/index.js Dynamic routing = pages/course/[courseId].jsx

Link / useRouter

import React from 'react'
import { Text, Button } from '@chakra-ui/react'
import Link from 'next/link';
import { useRouter } from 'next/navigation'

function Card(props) {
	const x = props.data;
	const { push } = useRouter();
	
	return (<>
		//Link
		<Link href={`/course/${x.id}`}>
			<Text>View Course</Text>
		</Link>
		
		//useRouter
		<Button onClick={()=>push(`/course/${x.id}`)}>View Course</Button>
		</>
	)
}

export default Card