Prismic
SvelteKit Crash Course: Build a Full Website in 90 min! - 2023 Tutorial
updated
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Rich Text 101
00:00 Converting HTML to Rich Text
00:00 Migrating images during conversion
00:00 Migrating links during conversion
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π Learn more about content modeling with Prismic:
prismic.io/docs/content-modeling
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Tools to migrate
00:00 Creating a Prismic repository
00:00 Initializing Slice Machine
00:00 Modeling content
00:00 Writing a migration script
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Creating documents
00:00 Handling multi-language documents
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Content relationships 101
00:00 Creating content relationships
00:00 Creating lazy content relationships
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Script setup
00:00 Prismic write client
00:00 Migration object
00:00 Dry run and next steps
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Script walkthrough
00:00 Running the migration script
00:00 Migration result, review, and publication
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
ποΈ Check out the Migration Series playlist for more migration-related content:
youtube.com/playlist?list=PLUVZjQltoA3yUXJz9DiOrWMCfzY9MBgHF
π Browse the official documentation about migrating to Prismic:
prismic.io/docs/migration
π’ Considering a migration to Prismic? Reach out to us to learn more:
prismic.io/enterprise
---
π Chapters:
00:00 Intro
00:00 Assets 101
00:00 Creating assets
00:00 Referencing assets in documents
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder #migration #wordpress #drupal
Plus, weβre super excited to announce a major update to our Migration API, which makes migrating your content to Prismic easier than ever!
π Check out the Migration API technical reference here:
prismic.io/docs/migration-api-technical-reference
π No signup Page Builder demo:
prismic.io/try
---
π Chapters:
00:00 Intro
00:22 New Page list
01:02 Copy & Paste a slice & New search
06:07 Image field update
07:06 New demo on prismic.io/try
08:54 New Migration client
Don't forget to like, comment, and subscribe for more updates from Prismic!
---
#prismic #pagebuilder
π Next.js 3D Portfolio:
youtu.be/rXDCAAkiC-s
Launch the Site:
github.com/prismicio-community/course-creative-portfolio-next
π Next.js Dark SaaS:
youtu.be/Cc37uTnbEos
Launch the Site:
github.com/prismicio-community/course-glisten-next
π Next.js 3D E-commerce Landing Page:
youtu.be/RKQqrNyAC6k
Launch the Site:
github.com/prismicio-community/course-fizzi-next
π₯€ Feel free to use these Next.js templates for any of your personal or commercial projects; they are all yours!
π Let us know in the comments below what you would like to see next. More GSAP? More Three.js? More flying soda cans?
----
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.
---
#nextjs #gsap #prismic
youtu.be/RKQqrNyAC6k
#nextjs #prismic
In this creative and fun course, we will make an e-commerce product landing page to sell a fictional soda brand called Fizzi. You'll learn how to bring 3D models into your projects, and how to fully animate them for scroll effects and so much more.
Youβll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder.
You'll learn react-three-fiber to use Three.js within React. Weβll also use Tailwind CSS to style the super polished website, and Vercel to host it!
Weβll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and Iβll walk you through everything you need to know.
At the end of this course youβll have built and deployed a show stopping 3D experience that will impress job prospects or potential clients.
---
π Course Resources: https://dub.sh/fizzi
π Figma project: https://fig.page/fizzi
π Final repository: github.com/a-trost/fizzi
π Live Site: https://fizzi-demo.vercel.app/
---
π Chapters:
00:00 Welcome to the Fizzi Next.js course
01:38 Website tour
06:47 Setting up Next.js and Prismic
14:42 Slice Machine 101 - Building the Hero
01:05:16 Styling with Tailwind CSS
01:29:54 Getting Started with GSAP
01:37:25 GSAP Timeline
01:47:19 GSAP Scroll Trigger
01:58:54 Getting Started with Three.js
02:14:06 Build a floating 3D soda can
02:39:16 React Three Fiber
02:47:37 Animating the can
03:13:51 Adding bubbles
03:21:59 Zustand and syncing animations
03:31:01 Handling the mobile version
03:35:28 3D performance
03:36:58 Loading screen
03:44:21 Diving can
04:37:07 Carousel Slice
05:16:43 Alternating text HTML & CSS
05:25:21 Alternating text animation
05:48:12 Big text Slice
05:56:11 Footer
06:01:39 Fixing details
06:03:41 Deploy to GitHub and Vercel
---
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.
---
#nextjs #gsap #prismic
π Want to try Svelte 5 with Prismic, try this full tutorial, building your 3D portfolio with GSAP, SvelteKit and Prismic:
youtu.be/JQAbenI2YTA
---
#javascript
Including all the latest improvements :
- A shiny media library
- Live Preview
- Tags
- Bulk edit / delete
- Translate with AI
---
β¨ To get a beta access to the Translate with AI feature, please fill out the form:
prismic.io/updates/localization-copilot
π Watch a live demo with Slice Machine in our latest Meetup:
youtube.com/live/9rJItSEvtQk
---
π Chapters
00:00 The Page Builder landing page
01:28 Building the Hero Section
03:05 Adding images / Media Library
05:48 Benefits section (Accordion)
08:10 Testimonial slice
--
#prismic #pagebuilder
In this lightning course, we will build a landing page and set up the building blocks allowing content writers to extend our website freely. We'll learn how to get started with Nuxt UI, a UI library made specifically for Nuxt, a leading Vue.js framework. We'll also make all of our website's content editable by using Nuxt UI components in Prismic slices.
Starting from the basics, this tutorial will set you on track to grow with Nuxt UI and Prismic. Step by step, we'll connect our website to Prismic, enabling great content edition and seamless previews when writing content.
By the end of this lightning course, you'll have the core knowledge of Nuxt UI and Prismic for you to build great websites upon.
π Nuxt UI: ui.nuxt.com
π IcΓ΄ne JS: icones.js.org
π Prismic: prismic.io
--
#nuxt #prismic
We brought Rich Harris, the creator of Svelte, to the Prismic Studio to show us how you can use runes in your next Svelte project.
π Try Svelte & Prismic in a 3D Portfolio website project:
youtu.be/JQAbenI2YTA
π Build a dark modern website with Sveltekit and GSAP
youtu.be/v5Ncz5AcXjI
---
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.
---
#svelte5 #runes
π Try Prismic now with SvelteKit, building a full Portfolio website with GSAP and Tailwind:
youtu.be/JQAbenI2YTA?si=Xmf-PwRLiaSunBVu
π Also featuring Rich Harris: youtu.be/fR6DFKq13J0?si=nbF3mlMHAbTOGBbi
---
#svelte #prismic
Join Sadek, CEO of Prismic and Alex Trost and Lucie Haberer from the Developer Experience team, as we take an existing website and improve it live by adding a new, Linear-inspired slice to it.
We'll build on top of one of our most popular courses : youtu.be/Cc37uTnbEos
__________
#prismic #meetup
Spoiler: Rich knows more about React than you might imagine π€―
β
π Getting started with Sveltekit? Watch our latest full courses featuring Svelte / GSAP / Tailwind and Prismic:
- youtu.be/v5Ncz5AcXjI
- youtu.be/JQAbenI2YTA
π If youβre a React lover, get started with Next.js and Prismic:
- youtu.be/rXDCAAkiC-s
- youtu.be/Cc37uTnbEos
#svelte #react
Want to experience Next.js, Prismic, and Vercel in action? Join us for a masterclass with Alex Trost, where we'll be building:
π A 3D developer portfolio: youtu.be/rXDCAAkiC-s
π A dark modern website: youtu.be/Cc37uTnbEos
---
π Chapters
00:00 Vercel fundraising in 2024 & Guillermo's vision
08:14 Delivering value with AI?
11:50 Dealing with competition
18:50 Tech Challenges while building Prismic & Vercel
26:10 Product-led growth
36:32 SaaS pricing and sales-driven companies
41:00 Before & After GenAI
58:30 The importance of brand voice and consistency
01:07:30 Shaping a simple vision of the future
---
#vercel #prismic #nextjs
Additionnaly, weβve released full support of Next.js 15 RC and Svelte 5 RC in Slice Machine, try it out!
π Get access to Translate with AI beta: prismic.io/updates/localization-copilot
π Join the user survey and influence the Prismic roadmap: app.opinionx.co/a0e13671-b4ae-4acb-9ada-dc28d19edb51/intro
π00:00 Intro
π00:21 Media Library Recap (Tags)
π03:10 Translate with AI beta (Demo)
π05:48 Next.js 15 & Svelte 5
---
#prismic #ai
π Course guide on Notion: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386
#sveltekit #gsap #prismic
Translate with AI
β Get started fast in a new locale, live demo!
Lightning round of Q2
β Organize and filter your media better with media library!
β Slice Machine's new modeling capabilities.
Grow with an agency partner
Special guest: Sylvain Lourgouilloux, managing director at lab.co.uk, Prismic partner agency.
Discover how agencies can leverage Slice Machine to reuse components and speed-up their development time by 40%!
__________
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 SvelteKit website with Tailwind, GSAP and Prismic
youtu.be/v5Ncz5AcXjI
βΊ [Starters] Try Prismic with Sveltekit
prismic.io/blog/sveltekit-prismic-integration
---
βΊ 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 Page Builder, for Next.js, Nuxt and SvelteKit developers.
---
#prismic #meetup
In this fun course, we'll make an interactive and stylish personal portfolio website to help you stand out. You'll learn SvelteKit, a JavaScript framework that makes performant sites and is a joy to work with. We'll use Three.js to create awesome 3D effects, and use a library called Threlte to make Three easy to use within Svelte. We'll dig into GSAP to animate our site on enter, scroll, and hover, and use Tailwind CSS for all the styling. We'll use Prismic for our content, which turns our custom components into a page builder with a ton of great features like live previews.
Starting from the basics, this tutorial will show you how to create a website with Svelte and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.
By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!
π Course Resources: https://prismic.notion.site/Course-Resources-3D-Portfolio-Site-331e3f2b39d642e2bddf8ebf234a4386
π Final repository: github.com/a-trost/3d-sveltekit-tutorial
π Live Site: https://3d-sveltekit-tutorial.vercel.app/
---
Chapters π
00:00 Intro
00:49 Full Website Tour
08:53 Setup your project (SvelteKit & Prismic)
20:22 Building the Hero Section (Slice Machine & GSAP)
02:06:26 Create background styles
02:13:36 Settings and Footer
02:54:23 Create the Header
03:33:31 Biography section
04:18:41 Animated Tech List section
04:43:42 Experience section
04:56:46 Blog section
05:59:46 Professional projects category
06:52:15 Deploy on Vercel
07:03:30 Polishing the live website
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#sveltekit #prismic #gsap
On the Page Builder side, a new powerful feature is coming soon: Team Spaces.
It will allow you to define spaces for your team, allowing you, for instance, to permit Legal team members to only edit Legal pages.
π Get a demo of Team Spaces: prismic.io/updates/team-spaces
π Slice Machine 2.0.0 release on GitHub: github.com/prismicio/slice-machine/releases
Chapters:
π 00:00 Page Builder Recap
π 01:36 New Team Spaces
π 02:57 Slice Machine 2.0.0 Release
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismic
Did you know that every month, more than 150 new projects are started with Prismic and SvelteKit?
Want to learn more about both technologies?
Join us to learn firsthand from my discussion with Rich Harris about the future of the web.
Weβll dive into how using frameworks like Svelte can avoid over-complexity and improve developer experience.
π Chapters:
00:00 Intro
05:22 Welcome to the Meetup
06:29 Rich Harris & Svelte: How to build opensource
16:10 Why we chose to integrate Svelte with Prismic
22:20 What's new with Svelte 5 & Runes?
33:05 Getting Started with Prismic & Svelte
41:33 Live Q&A with Rich Harris
46:49 Prismic Updates - Slice Machine 2.0 and Page Builder
__________
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 SvelteKit website with Tailwind, GSAP and Prismic
youtu.be/v5Ncz5AcXjI
βΊ [Starters] Try Prismic with Sveltekit
prismic.io/blog/sveltekit-prismic-integration
---
βΊ 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 Page Builder, for Next.js, Nuxt and SvelteKit developers.
---
#sveltejs #sveltekit
Interested? Join our 30-minute Meetup this Wednesday to discuss this integration. Itβs your chance to influence our decision-making process by sharing your thoughts directly with Prismicβs decision-makers: Guy, the Page Builder Product Manager, and Sadek, our CEO. Our guest, Abdul Shucker from Fineart (a Canadian agency using AI to speed up website delivery), will also share insights.
__________
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://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 Page Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #jasperai
π 00:00 Intro
π 00:11 AI copywriting copilot in the Page Builder?
π 05:07 Time-saving media library search
π 06:38 New revision history
π 07:47 HTML to Prismic Migration
Checkout all new product releases: prismic.io/updates
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
In this in depth course we make a trendy, dark and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!
You'll learn how to use SvelteKit, the ultra fast Svelte metaframework. Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super-polished website.
We'll get bootstrapped with a minimal starter to set up SvelteKit and Prismic for us, and I'll walk you through everything you need to know.
At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,
π Docs and Resources - https://prismic.notion.site/Course-Resources-Dark-Modern-Website-f1963068872c47ccad97820240e5b7e7
π Live Demo - https://repeat-ai.vercel.app/
π GitHub repo - github.com/a-trost/repeat-ai
- - -
π Chapters:
00:00:00 - SvelteKit Full Course Intro
00:01:41 - Project Overview with SvelteKit & Prismic
00:09:45 - Notion Doc / Help and troubleshooting
00:11:26 - Getting Started with Prismic
00:14:25 - Getting started with VSCode
00:18:42 - Homepage
00:29:56 - Adding Tailwind CSS
00:34:59 - Installing local font
00:41:45 - Setting up footer
01:07:03 - Tailwind CSS VSCode extension
01:07:41 - Creating the Header
01:54:00 - Styling the bento box
02:20:40 - Showcase Section
03:03:17 - Case Studies Slice
04:00:47 - Integrations Slice
04:29:50 - Call to action Slice
04:37:00 - Assembling in the Page Builder
04:57:40 - Deploying on Vercel
05:10:45 - Animate the Hero with GSAP
05:54:26 - Animate the Integrations section
06:16:57 - Accessibility and Final Touch
---
#sveltekit #gsap #svelte #sveltekit #prismic
π 00:00 Intro
π 00:16 Page Builder & Media Library Updates
π 03:10 Slice Machine Responsive UI
π 04:06 Migration API Bulk Updates
π 06:36 Smart Copy Paste with AI (from Notion or Google Docs)
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
Join us on Wednesday for our end-of-quarter roundtable as we go through these releases and give you a sneak-peak into the features landing in the coming three months: new documents search, smart copy paste from Notion or Google Docs to the Page Builder & team spaces in the Page Builder.
π Chapters:
00:00 Welcome to the Meetup
14:35 Migration API Updates
26:55 Platform & API
34:38 Page Builder & Media Library
57:40 AI Features: Smart Copy Paste
01:04:53 Slice Machine Updates & Priorities
01:15:17 Live Q&A
__________
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://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 Page Builder, for Next.js and Nuxt.js developers.
---
#prismic #headlesscms #nextjs
prismic.io/nextjs
In this fun course, we will make a trendy, dark, and modern website in the same style as Linear, AuthKit, Raycast, Clerk, and many more!
You'll learn how to use Next.js, the leading React framework, as well as Prismic, a CMS that gives you a Headless Page Builder. We'll use GSAP to add wonderful animations to our site, both on page load and on scroll. We'll also use Tailwind CSS to style the super polished website.
We'll get bootstrapped with a minimal starter to set up Next.js and Prismic for us, and I'll walk you through everything you need to know.
At the end of this course you'll have built and deployed a great SaaS marketing website that you can put in your portfolio or customize for clients,
π Docs and Resources - https://prismic.notion.site/Prismic-Next-js-Course-Resources-9eda931a8b3743b9b3aaf0b7a561403b?pvs=74
π Live Demo - https://glisten-ai.vercel.app/
π GitHub repo - github.com/a-trost/glisten-ai
- - -
π Chapters:
00:00:00 - Intro - Marketing Website with Nextjs 14
00:01:50 - Project Rundown
00:08:21 - Create Next.js site with Prismic
00:19:46 - Install Tailwind CSS
00:25:20 - Add Font
00:36:33 - VSCode Extensions for Next.js
00:29:28 - Create Settings custom type
00:37:08 - Creating Header and footer
01:08:59 - Building the Hero Slice
01:34:46 - Bento Box Slice
02:02:59 - Showcase Slice
02:33:21 - Case Studies Slice
03:42:30 - Call to Action Slice
04:04:44 - Deploy to Vercel
04:09:42 - Revalidation
04:13:24 - Add live preview URL (visual editing)
04:17:22 - Hero Section Animation with GSAP
05:09:51 - Integration Slice Animation
05:23:02 - SEO Check and Polishing
- - -
#nextjs #tailwindcss #gsap
π 00:00 Introduction
π 00:21 Iterate on Slices with AI
π 03:02 Media Library: New Search
π 04:20 Media Library: Bulk Delete
π 04:57 Media Library: New Tags
π 06:30 Slice Machine: Auto-save
π 07:27 Thank you!
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: bit.ly/3oiy6Rl
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismic #ai #medialibrary
Join our interactive Prismic Meetup to explore these new features with the Product team. Weβll cover the benefits, offer a live demo, and discuss future updates. Your feedback and questions are welcome, shaping Prismic's ongoing improvements.
π 00:00 Welcome to the Meetup!
π 03:44 Would you teach AI to your kids?
π 14:26 Ben Jackson from Paddle
π 30:42 What's new in Media Library?
π 45:00 Live Q&A
π 58:10 Product Roadmap
π 01:06:52 See you next month!
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://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.
---
#prismic #headlesscms #nextjs
We spoke with @danielroe the Head of the Nuxt Core team to get his opinion on all this and more. Daniel shared insights into his professional journey, offering advice to aspiring professionals, and sheds light on future trends and his vision for the industry.
Try Nuxt 3 with Prismic : prismic.io/docs/nuxt-3-setup
Follow Daniel Roe on:
YouTube: youtube.com/@danielroe
Twitch: twitch.tv/danielroe
Twitter / X: twitter.com/danielcroe
Chapters:
π 00:00 Intro
π 02:48 Start at Durham association
π 08:47 Working remotely
π 12:36 Becoming Nuxt Lead
π 15:35 Daniel's discovery of open-source
π 19:05 Nuxt 3 and Nuxt Bridge
π 23:15 Future of Nuxt in the community
π 27:40 GitHub contibutions and quality
π 35:50 Workload as an open-source contributor
π 41:36 Nuxt 4?
π 46:50 How do work magic into your planning?
π 48:35 AI and Large Language Models
π 57:44 Being a lazy developer
π 01:02:20 Nuxt module with Prismic
π 01:03:52 The Vue.js ecosystem
---
#nuxtjs #nuxt3
We touch on what's new in SvelteKit 2, and what's coming with Svelte 5 and Runes. I ask him about every framework adopting signals, and he explains why they're such a great concept.
Rich explains his thoughts on us overcomplicating web development, how some things should just be built in to the framework, and how we can make the web a better, more sustainable place.
π 00:00:00 Intro
π 00:00:49 What problem does Svelte solve?
π 00:07:49 Writing the first line of Svelte
π 00:12:34 Creating tech for on-the-ground problems
π 00:14:58 Still newsroom DNA in Svelte?
π 00:20:09 What's so great about Signals?
π 00:26:20 What are Runes?
π 00:33:28 Svelte VS React VS Vue
π 00:37:10 Maintaining SvelteKit
π 00:40:10 Svelte 5 Improvements
π 00:47:54 SvelteKit 2 - Same but different?
π 00:53:30 Goals for SvelteKit & Svelte
π 00:59:38 Rollup
π 01:01:58 Joining Vercel
π 01:06:59 Why are the docs so good?
π 01:16:13 Creation of the Svelte name and logo
---
π Try Sveltekit with Prismic now
prismic.io/docs/svelte-install
---
Join us this Wednesday at the Prismic Meetup for a fireside chat with the Product team. You'll hear the backstory behind the development of these features and the team's future plans for the APIs and Page Builder. We also want to hear from you: let us know your priorities for future developments and how they could benefit you and your team.
---
π Chapters:
00:00 Welcome to the Meetup
04:40 Antoine Ughetto from Makemepulse - Partner Agency
34:17 Migration API Live Demo
51:39 Page Buidler Updates
01:15:13 Prismic AI Features
01:20:27 Live Q&A
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://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.
---
#prismic #headlesscms #nextjs
1οΈβ£ How to schedule a release on the Page Builder.
2οΈβ£ A completely revamped Media Library, available now!
3οΈβ£ Updates on the Migration API.
4οΈβ£ How to change your master locale in a Prismic repository.
π Want to get access to the Migration API to migrate your existing content over to Prismic, get access to the beta: prismic.io/migrate
π If you want to enable the new Page Builder with the new Media Library on an existing repository, just ping us here: prismic.io/pb
π Chapters:
00:00 Intro
00:30 Page Builder: Schedule a release
04:00 Page Builder: New media library
06:08 Migration API updates
08:39 Change your master locale
09:17 Outro
See you next month!
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#prismic #pagebuilder
In this fun course, we will make a stylish and interactive personal portfolio site that really stands out. You'll learn to use Next.js, a leading React framework, and Three.js (React Three Fiber) to add awesome 3D effects. We'll also dive into GSAP for smooth, fancy animations and use Tailwind CSS to make everything look neat and professional.
Starting from the basics, this tutorial will show you how to create a website with Next.js and TypeScript. Then, step by step, we'll add the magic of 3D graphics and animations, ensuring your site is fun to interact with and looks great on any device.
By the end of this course, you'll have a stunning portfolio site that looks amazing with all the cool effects and styles and showcases your projects and skills in an engaging way. Get ready to impress everyone with your new, eye-catching online presence!
πFinal repository: github.com/a-trost/creative-portfolio
πLive Site: https://creative-portfolio-tutorial.vercel.app/
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
--
π Chapters
00:00 Intro
04:16 Getting Started - Project setup
27:29 Creating the Hero
32:12 Hero letters animation
01:00:00 Helper Component
01:06:29 Setting up Three.js Scene
01:40:01 Adding sound effects
01:45:08 Nav Bar
02:03:03 About Page
02:40:27 Tech List (Marquee Title)
03:03:05 Hover and Scroll Animations
04:47:15 Job Experience Slice
04:51:37 Deployment on Vercel
The Page Builder is now the default way of editing your pages on all new repositories! We'll show you an overview of the editing experience along with tips to schedule your releases and how to manage your legacy slices (if you're not using Slice Machine yet!)
π Haven't tried the Page Builder yet: Try editing a page here. No signup required! prismic.io/try
Slice Machine also had a lot of improvements this year with the added support of Sveltekit and the addition of new features like deleting and renaming your variations. We'll also give you a sneak peek of the features that will be shipped in 2024, like collaboration with the Github integration and team spaces.
Finally, we'll show you how to migrate your content from another platform over to Prismic with a new limit, increased from 200 to 1000 documents.
Chapters:
π 00:00 Intro
π 01:05 The new drag-and-drop Page Builder
π 05:48 Slice Machine supports Sveltekit, plus deleting and renaming slice variations
π 09:33 The new migration API supports large and multi-language websites
π 13:58 A sneak peek into 2024: Team Spaces, new Media Library and Search
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
This is your opportunity to sit at the table with us, share your thoughts, and help shape the future of Prismic. We look forward to this important dialogue with you.
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://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.
---
#prismic #headlesscms
#nextjs
#nextjs
πThis full guide will cover the following chapters:
0:00 Intro
1:48 Project current setup
11:30 Migrating to the App router
13:50 Updating dependencies
15:40 File conventions in App router
19:20 Creating the App folder & root layout
23:40 Migrating pages
27:25 Routing hooks
28:30 Migrating data fetching
30:30 Prismic migration guide
33:20 Migrating the Home page
41:25 Migrating dynamic UID page
44:10 Migrating API endpoints
48:00 Recap
π Prismic's blog article on App Router & Prismic: prismic.io/blog/how-to-use-prismic-with-nextjs-app-router
Project repositories:
π Starting Github Project: github.com/HamedBahram/prismic-next-migration
π Finished project on Github: github.com/HamedBahram/prismic-next-migration
Following up with Hamed's tutorials:
Server vs. client components in the App router β youtu.be/3Dw6D_WuzSE
Data fetching in the App router (SSG, SSR, ISR) β youtu.be/OJ5GaNVujaw
The new next/font package β youtu.be/D5oMzgy0h98
---
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 Next.js website, while delivering a page builder to your team: youtu.be/jSa_uskwaE0
βΊ [Starters] Try Slice Machine on Nuxt: https://prismic.club/nuxt-starters
βΊ [Starters] Try Slice Machine on Next.js: https://prismic.club/nextjs-starters
βΊ [Learn more about Slice Machine]: https://prismic.club/slice-machine
---
#nextjs #approuter