Dynamic linking routes in Next.js

Hello friends, welcome back to my blog and today in this blog post, I am going to show you, Dynamic linking routes in Next.js.

Next. js is a JavaScript framework created by Zeit. With this we can build server-side rendering and static web applications using React.

Friends here is the working code snippet for Dynamic linking routes in Next.js and please use this carefully:

1. Very first guys, I will tell you, how to add dynamic links inside the loop in Next.js:

In this example, I am getting the product info in loop and set dynamic routing links according to ID and guys route will be link : https://yourside.com/product/9341

...
import Link from 'next/link';
class App extends Component {

     //Store Dynamic data
     constructor(props) {
        super(props)
          this.state = {
            data: []
                  }
          }
render() {
   return (
    <div>
       {this.state.data.map((result) => {
            return (

                        <div>
                         
                           <Link
                              href={`/product?${result.id}`}
                              as={`product/${result.id}`}>
                              <a className="ps-collection">{result.title}</a>
                            </Link>

                        </div>
               )
            })}
     </div>
)
}
}

export default App;

Now we are done friends also and If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks