Pass custom prop or data to Next JS Link component

Question

I've started messing around with Next JS, and I've come across my first hurdle. I am creating a page displaying a bunch of podcast episodes and I am displaying a little preview card for each podcast on the homepage. The card component looks something like this:

import React from 'react';
import Link from 'next/link';
import { kebabCase } from 'lodash';
import { format } from 'date-fns';
import TextTruncate from 'react-text-truncate';

import { Episode as EpisodeInterface } from '../../interfaces';

type Props = {
  episode: EpisodeInterface;
};

const Episode: React.FunctionComponent<Props> = ({ episode }) => {
  return (
    <Link
      href="episodes/[id]"
      as={`episodes/${episode.itunes.episode}-${kebabCase(episode.title)}`}
    >
      <div className="group transition duration-500 cursor-pointer rounded-lg overflow-hidden shadow-lg border border-cream-darker bg-surface hover:bg-surface-hover hover:border-surface-hover hover:text-text-hover">
        <div className="px-6 py-6">
          <div className="font-bold font-serif text-3xl mb-2">
            {episode.title}
          </div>

          <div className="transition duration-500 flex justify-between mb-2 text-gray-700 group-hover:text-text-hover">
            <span>Episode {episode.itunes.episode}</span>
            <span>{format(new Date(episode.isoDate), 'd MMMM yyyy')}</span>
          </div>

          <div className="mb-2">
            <TextTruncate line={3} text={episode.contentSnippet} />
          </div>
        </div>
      </div>
    </Link>
  );
};

export default Episode;

Now I want to be able to pass the episode object to the full episode page located at /pages/episodes/[id].tsx that is being linked to via the Link element above, rather than have to refetch and filter all the episodes based upon the name of the route that I've chosen episodes/${episode.itunes.episode}-${kebabCase(episode.title)}.

Is it possible to pass the entire episode object to the new view?
If not, is it possible to pass some more specific data (e.g. unique id) to the view that will enable me to better identify the episode without cluttering the route with query params?

score 3 · Answer 1 · answered May 21 '20 at 06:46

3

You can't pass data to next/link component.

Even if you would pass it, you won't be able to access it on server-side when a user visits the page directly or refreshes it.

answered May 21 '20 at 06:46

Nikolai Kiselev

2,922
2
13
20

2

Yes, you're right. I'm new to SSR and now that I think about it more it makes sense what you are saying. – oldo.nicho May 26 '20 at 06:25

score 0 · Answer 2 · answered May 21 '20 at 06:58

0

Actually, due to this link, it is an open issue and NextJS has no proper solution for it. Based on NexJS docs you can just pass query params to the routed component. so I understand this is not a solution, but just right now it can fix your issue:

<Link href={{ pathname: '/about', query: { data: JSON.stringify(episode) } }}>
  <a>About us</a>
</Link>

Then in the routed component get the query from URL and parse it:

const RoutedComponent = () => {
  useEffect(() => {
    const { data } = getQueryParams(window.location.search);
  }, []);
};

Note: the getQueryParams is a simple function that returns all params data after the ? in the URL.

answered May 21 '20 at 06:58

AmerllicA

15,720
11
72
103

Thanks for the response. I get what you are saying but that would result in a very messy URL :-) I'm new to SSR and now that I think about it more it makes sense that state can not be passed from one view to another like with client side rendering. – oldo.nicho May 26 '20 at 06:26
Dear @oldo.nicho, there is another way, please see [After.js](https://github.com/jaredpalmer/after.js). it's a great library that used `react-router` inside `next.js`. so with this, you can fix your problem. if you are ok with this tell me to update my answer. – AmerllicA May 26 '20 at 06:39
Thanks for the suggestion @AmerllicA. I took a bit of a look at After.js and indeed it looks like it could be a nice solution, however I am currently focusing my energies on learning Next.js and I'd prefer to learn how to operate within the constraints of this library before branching out into yet another library. Nice suggestion though and hopefully someone else will find it useful. – oldo.nicho May 28 '20 at 05:11
possibly there's a better way to do exactly the same thing using next/router, which is shown in [this](https://stackoverflow.com/questions/53132617/with-nextjs-link-how-to-pass-object-clientside) answer – Lalit Vavdara Mar 28 '21 at 20:48

score 0 · Answer 3 · answered Apr 14 '21 at 17:57

Adding to @AmerllicA's answer,

I found a way to pass props to the target page when clicking on a <Link> component using getServerSideProps

Nextjs Link Component documentation https://nextjs.org/docs/api-reference/next/link

Nextjs getServerSideProps documentation https://nextjs.org/docs/basic-features/data-fetching#getserversideprops-server-side-rendering

You can pass a custom object to the query option of the href prop

<Link
    href={{
        pathname: "episodes/[id]",
        query: {
            id: episode.itunes.episode,
            title: episode.title
        }
    }}
    as={`episodes/${episode.itunes.episode}-${kebabCase(episode.title)}`}
 >
... button stuff
</Link>

in pages/episodes/[id].js

export async function getServerSideProps = (context) => {
    console.log(context.query) 
    // returns { id: episode.itunes.episode, title: episode.title}
    

    //you can make DB queries using the data in context.query
    return {
        props: { 
           title: context.query.title //pass it to the page props
        }
    }
}

And can see the console.log data in the terminal to confirm the data is passed

Finally, you can use the passed props in the episode screen

const Episode = (props) => {
    return (
        <div>{props.title}</div>
    )
}

I think this would work with getStaticProps as well.

Thank you for the question.

Pass custom prop or data to Next JS Link component

3 Answers3