From the course: The Freelance Stack: Real Project with Next.js and Strapi
Unlock this course with a free trial
Join today to access over 25,200 courses taught by industry experts.
Generic article component to render different component depending on Strapi data - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Generic article component to render different component depending on Strapi data
So, for everybody who doesn't go through the styling videos and who's now back looking at the next stuff with the JSX structure, there's one little thing you have to do in your page component for the individual article, which is you have to wrap a section around the article overview with the class name article section. Otherwise, we're going to now get to the juicy bit of creating our components depending on the input. In this video, we're actually just going to set everything up for that. What we're going to be doing is we're creating a general component that will use a switch statement to understand what kind of data is coming in and then decide on which component to render. I guarantee it will make a lot more sense just in a second. We're going to create a new file here in our blog folder within the components folder and we're and we're going to call this ArticleComponent.jsx, which sounds very generic, but that's exactly what it's going to be, right? We're going to have a very…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
-
(Locked)
Create dynamic zone in Strapi for customizable blog content14m 6s
-
(Locked)
Creating data for highlight article8m 28s
-
(Locked)
Article hero section JSX5m 45s
-
(Locked)
Styling: Article hero section5m 26s
-
(Locked)
Article intro component JSX8m 40s
-
(Locked)
Styling: Article intro component5m 29s
-
(Locked)
Generic article component to render different component depending on Strapi data9m 14s
-
(Locked)
Article headline JSX3m 15s
-
(Locked)
Styling: Article headline1m
-
(Locked)
Text with image component JSX15m 9s
-
(Locked)
Styling: Text with image component5m 48s
-
(Locked)
Article paragraph JSX2m 23s
-
(Locked)
Styling: Article paragraph1m 6s
-
(Locked)
Image component JSX3m 49s
-
(Locked)
Styling: Image component2m 20s
-
(Locked)
Other articles section on individual blog page3m 17s
-
(Locked)
Blog section homepage JSX13m 11s
-
(Locked)
Styling: Blog section homepage8m 52s
-
(Locked)
Fix article item for featured items on homepage1m 18s
-
(Locked)
-
-