{"id":27880,"date":"2022-06-09T09:05:25","date_gmt":"2022-06-09T09:05:25","guid":{"rendered":"http:\/\/make-video-flash-cards-in-next"},"modified":"2022-06-09T09:05:25","modified_gmt":"2022-06-09T09:05:25","slug":"make-video-flash-cards-in-next","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/","title":{"rendered":"Make Video Flash Cards in Next.js"},"content":{"rendered":"

There will be short videos uploaded to Cloudinary on some educational topic and they\u2019ll be rendered in random order on flashcards in the app, along with explainer text<\/p>\n

Initial setup<\/h2>\n

The first thing you need is a Cloudinary account. You can make one for free here<\/a>. This is where you\u2019ll be able to upload your videos to study from. Go ahead and create a new folder in your Cloudinary console called study-videos<\/code>. If you have any videos ready, upload them to this folder.<\/p>\n

Set up the Next app<\/h3>\n

Now we can move on to setting up the Next app. Open a terminal and run the following command:<\/p>\n

$ yarn create next-app --typescript\n<\/code><\/span><\/pre>\n
This will bootstrap the app for us. We\u2019ll be using Tailwind CSS for our styles so let\u2019s install that and a couple of other packages with the following commands:<\/p>\n
$ yarn add tailwindcss postcss autoprefixer\n$ npx tailwindcss init -p\n<\/code><\/span><\/pre>\n
You\u2019ll need to update the tailwind.config.js<\/code> with the following snippet so that the Tailwind styles are applied correctly:<\/p>\n
\/\/ tailwind.config.js<\/span>\n...\ncontent: [\n    \".\/pages\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n    \".\/components\/**\/*.{js,ts,jsx,tsx}\"<\/span>,\n  ],\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
The last bit of setup for Tailwind is adding the directives to your global styles. Go to the styles<\/code> folder and delete everything out of globals.css<\/code> and replace it with the following:<\/p>\n
\/* globals.css *\/<\/span>\n@tailwind<\/span> base;\n@tailwind<\/span> components;\n@tailwind<\/span> utilities;\n<\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n
Set up the .env file<\/h3>\n
We\u2019ll be working with the Cloudinary API to get all of the videos out of the study-videos<\/code> folder we made earlier. At the root of the project, make a new file called .env<\/code>. You\u2019ll need the three following values in order to make requests to the Cloudinary API. You can find them in your Cloudinary console.<\/p>\n
CLOUDINARY_API_KEY=your_jumble_of_numbers\nCLOUDINARY_API_SECRET=your_mix_of_characters\nCLOUDINARY_CLOUD_NAME=your_cloud_name\n<\/code><\/pre>\n
That\u2019s all for the setup! Now we can start building the UI for our flash cards.<\/p>\n
Make the flashcard page<\/h2>\n
Go to the pages<\/code> folder and open the index.tsx<\/code> file and delete everything inside of it. This is where we\u2019re going to render the flashcard. Start by adding the following code to set up the component and a few types.<\/p>\n
\/\/ index.tsx<\/span>\nimport<\/span> { useState } from<\/span> \"react\"<\/span>;\nimport<\/span> type { NextPage } from<\/span> \"next\"<\/span>;\nimport<\/span> Head from<\/span> \"next\/head\"<\/span>;\n\ninterface Videos {\n  videos<\/span>: string[];\n}\n\ninterface FlashcardData {\n  question<\/span>: string;\n  answer: string;\n  videoUrl: string;\n}\n\nconst<\/span> Flashcard: NextPage = ()<\/span> =><\/span> {\n  return<\/span> (\n    <div<\/span> className<\/span>=\"container mx-auto\"<\/span>><\/span>\n      <Head<\/span>><\/span>\n        <title<\/span>><\/span>Study for this test<\/title<\/span>><\/span>\n        <meta<\/span>\n          name<\/span>=\"description\"<\/span>\n          content<\/span>=\"It's time to get ready for some certification\"<\/span>\n        \/><\/span>\n      <\/Head<\/span>><\/span>\n    <\/div<\/span>><\/span><\/span>\n  );\n};\n\nexport<\/span> default<\/span> Flashcard;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Right now we\u2019ve just imported a few things and defined the <Head><\/code> for this page. Now let\u2019s get the data from Cloudinary so we can make the flashcards.<\/p>\n
Fetching video data from Cloudinary<\/h3>\n
We\u2019ll use Cloudinary\u2019s search API to get all of the videos in the study-videos<\/code> folder we made earlier. Since this is a Next app, we\u2019ll use the getStaticProps<\/code> function because this data needs to be available before the user\u2019s request. Add this code just above the default export statement.<\/p>\n
\/\/ index.tsx<\/span>\n\n...\nexport async<\/span> function<\/span> getStaticProps<\/span>(<\/span>) <\/span>{\n  const<\/span> params: any = {\n    expression<\/span>: 'folder:\"study-videos\"'<\/span>,\n  };\n\n  const<\/span> folderSearch = Object<\/span>.keys(params)\n    .map((key: string<\/span>) =><\/span> `${key}<\/span>=${encodeURIComponent<\/span>(params[key])}<\/span>`<\/span>)\n    .join(\"&\"<\/span>);\n\n  const<\/span> results = await<\/span> fetch(\n    `https:\/\/api.cloudinary.com\/v1_1\/${process.env.CLOUDINARY_CLOUD_NAME}<\/span>\/resources\/search?${folderSearch}<\/span>`<\/span>,\n    {\n      headers<\/span>: {\n        Authorization<\/span>: `Basic ${Buffer.from<\/span>(\n          process.env.CLOUDINARY_API_KEY +\n            \":\"<\/span> +\n            process.env.CLOUDINARY_API_SECRET\n        ).toString(\"base64\"<\/span>)}<\/span>`<\/span>,\n      },\n    }\n  ).then((r<\/span>) =><\/span> r.json());\n\n  const<\/span> { resources } = results;\n\n  const<\/span> videos: Videos = resources.map(\n    (resource: { secure_url: string }<\/span>) =><\/span> resource.secure_url\n  );\n\n  return<\/span> {\n    props<\/span>: {\n      videos,\n    },\n  };\n}\n\nexport<\/span> default<\/span> Flashcard\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
First, we define the search parameter we need to target the correct folder. Then we encode the search so that it\u2019s in a URL-friendly format. You could expand this to use multiple search parameters. After that, we make the GET request with the search parameters and our authentication information in the headers and wait for the JSON response.<\/p>\n
Next, we parse out the video URLs we need for the flashcard data and pass it to the Flashcard<\/code> component as a prop. So we\u2019ll need to do a quick update to the component declaration line.<\/p>\n
\/\/ index.tsx<\/span>\n\n...\nconst Flashcard: NextPage<Videos> = ({ videos }<\/span>) =><\/span>\n...\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Now we can associate the videos with questions and answers.<\/p>\n
Making the flashcard data<\/h3>\n
This is where you might pull in data from a different API to get the flashcard questions and answers, but we\u2019ll use some filler text for this example. Add the following code inside of the Flashcard<\/code> component, above the current return statement.<\/p>\n
\/\/ index.tsx<\/span>\n\n...\nconst [flashcardData, setFlashcardData] = useState<FlashcardData[]>([]);\nconst<\/span> [flipCard, setFlipCard] = useState<boolean>(false<\/span>);\nconst<\/span> [index, setIndex] = useState<number>(0<\/span>);\n\nuseEffect(()<\/span> =><\/span> {\n  const<\/span> questionsAnswers = [\n    {\n      question<\/span>: \"What was the name of the first computer invented?\"<\/span>,\n      answer<\/span>: \"Electronic Numerical Integrator and Computer (ENIAC)\"<\/span>,\n    },\n    {\n      question<\/span>: \"When was the first 1 GB disk drive released in the world?\"<\/span>,\n      answer<\/span>: \"1980\"<\/span>,\n    },\n    {\n      question<\/span>: \"What is the full form of UPS?\"<\/span>,\n      answer<\/span>: \"Uninterruptible Power Supply\"<\/span>,\n    },\n    {\n      question<\/span>: \"Difference between \u201c == \u201c and \u201c === \u201c operators.\"<\/span>,\n      answer<\/span>:\n        \"\u201c==\u201d is used to compare values and \u201c === \u201c is used to compare both values and types\"<\/span>,\n    },\n    {\n      question<\/span>: \"What are callbacks?\"<\/span>,\n      answer<\/span>:\n        \"Functions that will be executed after another function gets executed\"<\/span>,\n    },\n  ];\n  const<\/span> flashcardData = videos.map((video, i<\/span>) =><\/span> ({\n    question<\/span>: questionsAnswers[i].question,\n    answer<\/span>: questionsAnswers[i].answer,\n    videoUrl<\/span>: video,\n  }));\n\n  setFlashcardData(flashcardData);\n}, [videos]);\n\nif<\/span> (flashcardData.length === 0<\/span>) return<\/span> <div<\/span>><\/span>Loading...<\/div<\/span>><\/span><\/span>;\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
This code sets some initial states for the flashcards and the way they will be rendered. Then we create the flashcard data and update it whenever there\u2019s a change to the videos<\/code>. Next, we have a loading state that gets rendered while the flashcards are being created.<\/p>\n
All that\u2019s left now is actually rendering the flashcards in a user-friendly way.<\/p>\n
Rendering the flashcards<\/h3>\n
We want to cycle through the cards a number of times to learn the right answers to questions. So we\u2019ll have the cards on a continuous loop that users can keep clicking through, regardless of the number of questions. Add the following code below the <Head><\/code> element.<\/p>\n
\/\/ index.tsx\n\n...\n<main<\/span> className<\/span>=\"my-24 p-6 rounded-md\tborder-4 border-indigo-200 border-l-indigo-500 h-fit\"<\/span>><\/span>\n  {!flipCard ? (\n    <div<\/span> className<\/span>=\"text-center flex flex-col space-y-16\"<\/span>><\/span>\n      <h1<\/span> className<\/span>=\"font-bold text-3xl\"<\/span>><\/span>Topic: Tech Stuff<\/h1<\/span>><\/span>\n\n      <p<\/span> className<\/span>=\"\"<\/span>><\/span>{flashcardData[index].question}<\/p<\/span>><\/span>\n      <button<\/span>\n        className<\/span>=\"rounded-full bg-emerald-400 py-2 px-4 text-stone-100 w-1\/2 mx-auto\"<\/span>\n        onClick<\/span>={()<\/span> =><\/span> setFlipCard(true)}\n      >\n        Get answer and watch video\n      <\/button<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  ) : (\n    <div<\/span> className<\/span>=\"text-center flex flex-col space-y-4\"<\/span>><\/span>\n      <video<\/span>\n        controls<\/span>\n        src<\/span>={flashcardData[index].videoUrl}<\/span>\n        width<\/span>=\"80%\"<\/span>\n        className<\/span>=\"mx-auto\"<\/span>\n      ><\/span><\/video<\/span>><\/span>\n      <p<\/span> className<\/span>=\"\"<\/span>><\/span>{flashcardData[index].question}<\/p<\/span>><\/span>\n      <p<\/span>><\/span>{flashcardData[index].answer}<\/p<\/span>><\/span>\n      <button<\/span>\n        className<\/span>=\"rounded-full bg-violet-400 py-2 px-4 text-stone-100 w-1\/2 mx-auto\"<\/span>\n        onClick<\/span>={()<\/span> =><\/span> {\n          const updatedIndex =\n            index + 1 > flashcardData.length - 1 ? 0 : index + 1;\n          setFlipCard(false);\n          setIndex(updatedIndex);\n          console.log(index);\n        }}\n      >\n        Next question\n      <\/button<\/span>><\/span>\n    <\/div<\/span>><\/span>\n  )}\n<\/main<\/span>><\/span>\n...\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
This code represents the two sides of a flashcard. One side will just have the question and a button to go to the video and answer. If you run you app with yarn dev<\/code> at this point, you should see something like this.<\/p>\n
\"front<\/p>\n
The other side will have the video and the answer to the question.<\/p>\n
\"back<\/p>\n
That\u2019s it! Now you have an app that will let you make flashcards quickly and it can be expanded to include a number of other features.<\/p>\n
Finished code<\/h2>\n
You can find the complete code for this in the video-flashcards<\/code> folder of this repo<\/a> or you can check it out in this Code Sandbox<\/a>.<\/p>\n
<CodeSandBox\ntitle=\u201cusing-tailwind-with-next-js-forked-r1lyfr\u201d\nid=\u201cusing-tailwind-with-next-js-forked-r1lyfr\u201d\n\/><\/p>\n
Conclusion<\/h2>\n
Using videos as a part of any study routine can help make the information stick. With this app, you can include short videos from lectures or classes you\u2019re taking to get a quick review of everything that you need to know for a particular topic.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":27881,"comment_status":"","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[134,370,212,371],"class_list":["post-27880","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-guest-post","tag-image","tag-next-js","tag-under-review"],"acf":[],"yoast_head":"\nMake Video Flash Cards in Next.js<\/title>\n<meta name=\"description\" content=\"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Make Video Flash Cards in Next.js\" \/>\n<meta property=\"og:description\" content=\"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2022-06-09T09:05:25+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Make Video Flash Cards in Next.js\",\"datePublished\":\"2022-06-09T09:05:25+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA\",\"keywords\":[\"Guest Post\",\"Image\",\"Next.js\",\"Under Review\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2022\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\",\"url\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\",\"name\":\"Make Video Flash Cards in Next.js\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA\",\"datePublished\":\"2022-06-09T09:05:25+00:00\",\"description\":\"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA\",\"width\":4023,\"height\":6000},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Make Video Flash Cards in Next.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Make Video Flash Cards in Next.js","description":"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/","og_locale":"en_US","og_type":"article","og_title":"Make Video Flash Cards in Next.js","og_description":"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.","og_url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/","og_site_name":"Cloudinary Blog","article_published_time":"2022-06-09T09:05:25+00:00","twitter_card":"summary_large_image","twitter_image":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/"},"author":{"name":"","@id":""},"headline":"Make Video Flash Cards in Next.js","datePublished":"2022-06-09T09:05:25+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","keywords":["Guest Post","Image","Next.js","Under Review"],"inLanguage":"en-US","copyrightYear":"2022","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/","url":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/","name":"Make Video Flash Cards in Next.js","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","datePublished":"2022-06-09T09:05:25+00:00","description":"Sometimes studying can be difficult when you have to keep cross-referencing videos. That's why we're making an app that lets you add videos to digital flashcards in this Next app.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","width":4023,"height":6000},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/guest_post\/make-video-flash-cards-in-next\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Make Video Flash Cards in Next.js"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1681926012\/Web_Assets\/blog\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b\/cd51d7b47c0a6a132d05725aa76c1de68b7a0bde-4023x6000-1_278815fd1b.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27880","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=27880"}],"version-history":[{"count":0,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/27880\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/27881"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=27880"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=27880"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=27880"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}