next js page loader

  1. Create a Next.js Project:

  2. Use npx create-next-app to generate a new Next.js project.

  3. Navigate to the Pages Directory:

  4. Move to the pages directory in your Next.js project.

  5. Create a New Page:

  6. Create a new JavaScript file for your page, for example, example.js.

  7. Import the useRouter Hook:

  8. Import the useRouter hook from next/router.

    javascript import { useRouter } from 'next/router';

  9. Define the Page Component:

  10. Define a React component for your page.

    javascript function Example() { // Your component code here }

  11. Use the useRouter Hook:

  12. Use the useRouter hook to get the router object.

    javascript const router = useRouter();

  13. Access Route Parameters:

  14. Use the router.query object to access route parameters.

    javascript const { param1, param2 } = router.query;

  15. Render the Component:

  16. Render your component and display the route parameters.

    javascript return ( <div> <p>Parameter 1: {param1}</p> <p>Parameter 2: {param2}</p> </div> );

  17. Export the Component:

  18. Export your component as the default export.

    javascript export default Example;

  19. Start the Development Server:

    • Run npm run dev to start the Next.js development server.

  20. Visit the Page:

    • Open your browser and go to http://localhost:3000/example/parameter1/parameter2 to see your page in action.