Dynamic Routing In NextJs with Typescript

Dynamic Route: pages/users/edit/[id].tsx

Step 1: Collect each route slugs in the path by the getStaticPath method.

export const getStaticPaths: GetStaticPaths = async () => { 
let users: any = [];        
var fbService = new firebaseService("User");await fbService.getAll().then((value:any) =>{                        users = value as IUser[];        
})   
const paths = users.map((data:any) => {      
return {          
params: { id: data.id },
      }  
})
  return { paths,  fallback: false }}

Step 2: Access route slug in the getStaticProps method and return the props data according to slug.

export const  getStaticProps: GetStaticProps = async (context) => {  var firebase = new firebaseService("User");  
let user: any = {};
const { id } = context.params as IParams;await firebase.getById(id).then((value:any) =>{
            user = value as IUser;  
});    
return {    
props: {user}    
}
}

Have A Happy Routing!!