This content originally appeared on DEV Community and was authored by Turing
To learn a new software engineer language or framework could be a difficult task, here is a simple tutorial on how to use URL query parameters in a new file page component in Next.js:
Step 1: Setting up a New Next.js Project
If you don’t already have a Next.js project, you can create one by running the following commands:
npx create-next-app@latest my-next-app
cd my-next-app
npm run dev
This sets up a basic Next.js app and runs the development server at http://localhost:3000.
Step 2: Creating a New Page Component
Next.js provides a file-based routing system. You can create a new page by adding a file inside the pages directory.
Let’s create a new page component at pages/user.js.
Inside the pages folder, create a new file called user.js.
Now, add the following code to the user.js file:
// pages/user.js
import { useRouter } from 'next/router';
const UserPage = () => {
const router = useRouter();
const { name, age } = router.query;
return (
<div>
<h1>User Information</h1>
<p><strong>Name:</strong> {name ? name : 'Unknown'}</p>
<p><strong>Age:</strong> {age ? age : 'Unknown'}</p>
</div>
);
};
export default UserPage;
Step 3: Understanding the Code
useRouter: This is a Next.js hook that gives you access to the router object, which contains the URL information. You can extract the query parameters from router.query.
router.query: Contains the query parameters from the URL. In this example, we extract name and age.
Step 4: Testing URL Query Parameters
Now that you’ve set up the page, let’s pass some query parameters.
Start your development server if it’s not already running:
npm run dev
Go to the browser and visit the following URL:
http://localhost:3000/user?name=John&age=30
You should see the page displaying the user’s name as "John" and age as "30". If you visit the page without query parameters, it will display "Unknown" for both fields:
http://localhost:3000/user
Step 5: Adding Default Values (Optional)
If you want to provide default values for the query parameters, you can modify the component like this:
// pages/user.js
import { useRouter } from 'next/router';
const UserPage = () => {
const router = useRouter();
const { name = 'Guest', age = 'N/A' } = router.query; // Set default values
return (
<div>
<h1>User Information</h1>
<p><strong>Name:</strong> {name}</p>
<p><strong>Age:</strong> {age}</p>
</div>
);
};
export default UserPage;
Conclusion
You’ve now learned how to capture and display URL query parameters in a Next.js page component using the useRouter hook. This is useful for passing data through the URL, like user info, filters, or any dynamic content.
This content originally appeared on DEV Community and was authored by Turing
Turing | Sciencx (2024-09-18T04:24:20+00:00) Nextjs Beginner tutorial. Retrieved from https://www.scien.cx/2024/09/18/nextjs-beginner-tutorial-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.