Prismic | How to query a page with Next.js & Prismic | Tutorial @Prismic | Uploaded July 2022 | Updated October 2024, 12 hours ago.
This basic tutorial video will show you how to use the Prismic Client package in Next.js to query content from a page created with a repeatable Custom Type. You will also learn how to pass SliceZone data to your Slices components with the Prismic React kit.
🔗 Fetch data with Next.js - prismic.io/docs/technologies/fetch-data-nextjs
🔗 Setup a Next.js project - prismic.io/docs/technologies/setup-nextjs
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
Chapters:
📍 00:06 - Example page
📍 00:18 - Required packages
📍 00:32 - Page route
📍 00:43 - getStaticProps
📍 00:54 - Initialise the Client
📍 01:23 - Query by UID
📍 02:05 - Create Page component
📍 02:23 - Import Slices and SliceZone
This basic tutorial video will show you how to use the Prismic Client package in Next.js to query content from a page created with a repeatable Custom Type. You will also learn how to pass SliceZone data to your Slices components with the Prismic React kit.
🔗 Fetch data with Next.js - prismic.io/docs/technologies/fetch-data-nextjs
🔗 Setup a Next.js project - prismic.io/docs/technologies/setup-nextjs
---
As a developer, you should build websites using your favorite Jamstack framework.
Prismic allows you to build website sections, that you can connect to a website builder for your client or team. They will create pages from there and you get that content back to your code through our fast API.
► [Tutorial] Build a full website with Next.js 13, Prismic, Tailwind and Typescript:
youtu.be/nfZu56KsK_Q
► [Tutorial] Build a full website with Nuxt 3 and Prismic's new Page Builder:
youtu.be/8GmfcbuYOWE
► [Starters] Try Slice Machine on Nuxt: prismic.club/nuxt-starters
► [Starters] Try Slice Machine on Next.js: prismic.club/nextjs-starters
► [Learn more about Slice Machine]: prismic.club/slice-machine
---
► Find us also on:
Twitter: twitter.com/prismicio
Instagram: instagram.com/prismicio
LinkedIn: linkedin.com/company/prismic-io
► [Who are we?] : Prismic is a headless Website Builder, for Next.js and Nuxt.js developers.
---
Chapters:
📍 00:06 - Example page
📍 00:18 - Required packages
📍 00:32 - Page route
📍 00:43 - getStaticProps
📍 00:54 - Initialise the Client
📍 01:23 - Query by UID
📍 02:05 - Create Page component
📍 02:23 - Import Slices and SliceZone
