Skip to content
Advertisement

Pass array value to getStaticProps in Next js

I’m doing fetch request to get my Youtube playlist. and in doing so i used getStaticProps(), the problem I’m facing is that my playlist depends on my array of objects result.

export async function getStaticProps(){
  const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID;
  const API_KEY = process.env.YOUTUBE_API_KEY;
  //const REQUEST_URL = `https://youtube.googleapis.com/youtube/v3/playlistItems?part=snippet&playlistId=${MY_PLAYLIST}&key=${API_KEY}`;
  const REQUEST_URL = `https://youtube.googleapis.com/youtube/v3/channelSections?part=snippet&channelId=${MY_PLAYLIST}&key=${API_KEY}`;

  const response = await fetch(REQUEST_URL);
  const result = await response.json();

  return{
    props:{result: result},
    revalidate: 3600,
  }
}

the array of objects structure is in my ./utils/playlists.js file.

const Playlist = [
  {
    id: 1,
    playlistId: '...first_playlist_id...',
    name: ' name '
  },
  {
    id: ,
    playlistId: '...second_playlist_id...',
    name: ' name '
  },
...
]

export default Playlist;

what i want to achieve is that instead of getting my const MY_PLAYLIST = process.env.YOUTUBE_PLAYLIST_ID; from my .env.local file to get it from ./utils.Playlist.js file as const MY_PLAYLIST = selected_playlist . in regular situation i use

{Playlist.map((list, index)=>{
   return (
     <Card list={list} key={index}/>
   )
})}

to map my arrays of objects. so what should i do in my static props function?

Advertisement

Answer

Solution with SWR

Add a new folder called ‘json’ and add a new file called ‘data.json’ inside. Then paste your data like below (without assignment to a variable)

[
  {
    id: 1,
    playlistId: '...first_playlist_id...',
    name: ' name '
  },
  {
    id: ,
    playlistId: '...second_playlist_id...',
    name: ' name '
  },
...
]

Add a new file inside your pages/api folder called ‘fetch.js’ and paste the code below

import path from 'path';
import { promises as fs } from 'fs';

export default async function handler(req, res) {
  const dataDirectory = path.join(process.cwd(), 'json');
  const fileContents = await fs.readFile(dataDirectory + '/data.json', 'utf8');

  res.status(200).json(fileContents);
}

Install the swr library

npm install --save swr

Display the data using the swr library

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

export default function Index() {
  const { data, error } = useSWR('/api/fetch', fetcher);

  if (error) return <div>Error!</div>;
  if (!data) return <div>Loading..</div>;

  return (
    <div>
      {data.map((item, index) => <Card list={item} key={index} />)}
    </div>
  )
}
Advertisement