How To Get Data From URL in NEXT-JS 13

In this guide, we will learn how to retrieve data from the URL of a Next.js application. Throughout this blog post, we’ll be exploring the functionalities of the most recent version of Next.js, which is version 13. Please note that the steps may vary for different versions, such as version 12 or earlier. For this tutorial, I assume you have npm installed or a similar package management system to handle your packages.

Creating a NEXT-js Application.

To create a NEXT.js application in version 13, simply run the following command:

npx create-next-app@latest app

In this tutorial, we will create an application named “app”. Running this command will prompt you with various suggestions. Feel free to accept or decline these prompts based on your requirements. However, make sure to accept “AppRouter” and decline the usage of the “/src” directory. We will be using the new “app” directory structure for this tutorial.

Creating a Link

To retrieve data from the URL, I will be using the Link function from next/navigation. Below, I will provide an example of how to use the Link function. Feel free to customize it according to your needs.

<Link
href="/hello?color=pink"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{" "}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>Pink</p>
</Link>

In this example, the focus is on the href part. After the ? symbol in the href, you provide a keyword followed by the date. The syntax for the Link component involves using the page address followed by a question mark. After the question mark, you specify a keyword, which will be used for accessing the value on another page. Following the keyword, use an equal (=) sign and then the data you want to pass.

Accessing the Link

To access the data from another page, you need to import searchParams from next/navigation.

"use client";

import { useSearchParams } from "next/navigation";

export default function Hello() {

const searchParams = useSearchParams();

const Color = searchParams.get("color");

return (

<div>

<div>

<h1>{Color}</h1>

</div>

</div>

);

}

Now, we retrieve the value passed using the `Color` variable.

If you like this blog , please don’t forget to give a clap . if you want to learn more about privacy,security,technology and Linux, consider following me. Plus, whatever I find interesting and valuable.