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.
Image component JSX - Next.js Tutorial
From the course: The Freelance Stack: Real Project with Next.js and Strapi
Image component JSX
2nd of October. So we are on our very last component that we have to build on the front end. We already get the data from Strapi and that is here this landscape component. It's actually pretty easy, it's just the image with the caption below. So when we get into it we're not going to write that much code for this one. So we're going to go into Visual Studio Code and just create within our block folder another new component called landscape image dot jsx and per usual i'm just gonna very quickly type that up here we're going to receive some image data and what we're going to return for now is null export the component and then bring it into our article component just make sure to export default there we go okay Now, on our article component, very similar to everything that we've done before. So landscape image is the one we're bringing in. And here, I said we have some image data which will come in from this component right here. And now, there we are, landscape image. What do we…
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)
-
-