The details about the prose is a lifesaver, thanks! FYI for anyone else, Chakra also has a prose package that can be used, seemingly much like the Tailwind one.
Hey, would it be possible to have an improved version of this video with Nextjs(router app) + Contentful using servers actions please, as I find action servers complicated? Your work is really amazing, you explain really well.
im getting error on const Server Error TypeError: Expected parameter accessToken This error happened while generating the page. Any console logs will be displayed in the terminal window. Source src\pages\index.js (5:15) @ contentful 3 | import * as contentful from "contentful"; 4 | > 5 | const client = contentful.createClient({ | ^ 6 | space: process.env.CONTENTFUL_SPACE_ID, 7 | accessTokent: process.env.CONTENTFUL_ACCESS_TOKEN, 8 | }); What to do??
Does anyone know how to set up draft mode/preview mode with Next.js 13 app router? I'm having a difficult time figuring it out. Any guidance would be appreciated!
what if I want to create multiple summary and content items within a blog article? lets say its a really long blog, do i need to add a new field for each summary and content items in contentful?
Hello there, I'm having a bad time doing the same with Next.js 13.4. I don't know how to pass in the function to loader without receiving this error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
There is a project called Lexical which is a good Rich Text Editor. There you go for an idea for a video. Use it to make your own api with nextjs. Now, you dont need strapi, contentful.. or other cms
You need to create a `.env.local` file and provide the `CONTENTFUL_SPACE_ID` and `CONTENTFUL_ACCESS_TOKEN`. You can get these from your Contentful dashboard.
Hey Thanks for this tutorial, ❤ For the RichText rendering, will the same code work without using tailwind/prose ? And just using the Contentful provides packages?
Welcome to the channel Siosaia! Are you using Contentful to serve up your images? If yes, are you using a custom loader or the default NextJs image loader?
If you're using Tailwind typography plugin like I did in the video you can use the `prose` prefix to target all of your elements (e.g. `prose-h1` to target your `h1` tag that is inside a `prose` container), if you're not using Tailwind you can use the `@contentful/rich-text-react-renderer` package as I demonstrated in the video when creating the `RichText` component to customize how you style the content of your blog post body. Does that answer your question?
Fantastic!!! i love it a lot!! but what about Pages - like about us, services page, contact us page filling content from contentful please kindly explain on this....
Thanks! That's just the matter of creating pages/content in Contentful. I will probably have an updated version of this video that uses the App router.
37:49. I got the error. here.. Server Error RangeError: Invalid time value This error happened while generating the page. Any console logs will be displayed in the terminal window. Source lib/utils/index.js (3:9) @ format 1 | export function formatDate(dateString, options) { 2 | const { format } = new Intl.DateTimeFormat('en-US', options) > 3 | return format(new Date(dateString)) | ^ 4 | } 5 | Call Stack dateString components/ui/DateComponent.jsx (6:18) Show collapsed frames. do you know why?
The `dateString` parameter you've send to this function which is coming from Contentful is invalid. Check to see if you have defined a `date` field in your `Post` content type.
Does this work if I am fetching the HTML content string produced by the CKEDditor rich text in Django? I mean.. I am using Django as my backend and inside Django is the Rich Text Editor CKEditor, so to parse the HTML content which comes as a string from the Json, I have tu use parse() from html-react-parser to render it as it should, but with the disadvantages that this way I lose the benefits of react smooth navigation when there are links in the content, Can I solve this through this contentful react renderer??
Good question Henry, Contentful react renderer transforms json object returned from Contentful rich text to html or jsx. It doesn't work if you feed html string to it. Look at the docs here: www.npmjs.com/package/@contentful/rich-text-react-renderer
@@hamedbahram Thank you, it's been a hard stuff, because more than 3 days investigating and nothing, I hope someday Django or Next.js has a solution for this, thanks!
I've been following this for a week, finally got to near the end, as i am building this in app router. unfortunately, i absolutely don't understand how you got preview from the react functional component argument :/ but anyway this was a great tutorial!!! hoping this helps my portfolio so i can finally get an entry level job ... (i know it's not enough but it helps ig? )
@@hamedbahram I'd be so grateful! I've been trying to implement live-preview, i think most of your instructions are doable with a few tweaks in app router, but it wld be great if you add a short tutorial on implementing live-preview in app router since that's a new contentful feature that wasnt yet available when you published the vid :D
Good Video! I have an issue here. I have deployed my website on vercel and now when I make changes on contentful websites they do not reflect on deployed site. Why?
Hey Hira, if you're using static site generation, `getStaticProps` in NextJs, your content will be fetched during the build and deploy process, therefore any changes you make to Contentful after that won't be reflected in your live site. To solve this you can either 1) set up a webhook in Contentful to trigger a re-deploy in Vercel whenever you make updates or 2) use ISR (incremental static regeneration) to revalidate your pages on a set time interval and get the fresh data from Contentful or 3) implement on-demand ISR endpoint to revalidate your data using a webhook.
I just dropped my new NextJs course, and one of the projects we build in the course is a portfolio site using MDX. Here is a link to my NextJs course: www.hamedbahram.io/courses/nextjs That said, I also have a video on the channel about using MDX in NextJs if that's what you're looking for: th-cam.com/video/NVO3CzYfrNs/w-d-xo.html Unless you're talking about using MDX in the new NextJs 13 app directory, which is a video I'll publish on the channel in the coming weeks. Let me know if that answers your question?
Do you know how rich text is stored and processed in CMS? If I just add a rich text editor on my existing backend with a library like Quill or Draft, save the data as a whole to the database, and fetch the data every time I use it from the database instead of using a CMS. is it going to be less performant?
Generally speaking your data is stored as an object in the CMS, similar to what you get back from the API. I'm not sure what you're trying to accomplish, but adding another database layer on top of your CMS (which is just another database) doesn't seem to be necessary. Again, I'm not sure what problem you're facing with the rich text field.
@@hamedbahram Because I've already built a backend, I just want to add rich text editor functionality to it. So I am trying to build a custom rich text editor to avoid using a CMS and making extensive changes. I am not certain about how CMS platforms handle the data, as I have the impression that using a CMS may offer better performance. If I build a rich text editor and store the formatted data in my MongoDB database, will it function similarly to how a CMS handles it? Additionally, if there are images embedded in the formatted data, what would be the optimal way to store or process them?
I see. Yeah you can do that, if you store the formatted data in your mongo database, you've basically built your own CMS, and if indexed correctly, it would be as performant. PayloadCMS actually uses mongo in the backend, and it's open source, you can get some inspiration. As far as images, you can upload them to a service like Cloudinary or imgix and save the url back in your database, and when rendered in NextJs you can use a custom loader to optimize with `next/image`
your videos help a lot to learn nextjs. I have a question. I have build a contentful blog. but i am failed to retrieve the thumbnails or feature image of a specific post from items.includes.asset. please, create a video about it.
The details about the prose is a lifesaver, thanks! FYI for anyone else, Chakra also has a prose package that can be used, seemingly much like the Tailwind one.
Anytime Sam! thanks for noting Chakra, and welcome to the channel.
fr
Thanks, Hamed
You're welcome!
Amazing, very clear explanation.
Thank you so much Hamed.
Glad it was helpful!
This is PERFECT! Thank you SO much.
You're so welcome! I'm glad it helped.
Hey, would it be possible to have an improved version of this video with Nextjs(router app) + Contentful using servers actions please, as I find action servers complicated? Your work is really amazing, you explain really well.
Hmm 🤔 sure I'll have that in mind.
Awesome im using this video but trying to use app router and typescript! Helped alot so far
Glad it helped! I'm due for an updated contenful video :)
how about a new video with Contentful type generation & Typescript?
Yeah it's time!
im getting error on const Server Error
TypeError: Expected parameter accessToken
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
src\pages\index.js (5:15) @ contentful
3 | import * as contentful from "contentful";
4 |
> 5 | const client = contentful.createClient({
| ^
6 | space: process.env.CONTENTFUL_SPACE_ID,
7 | accessTokent: process.env.CONTENTFUL_ACCESS_TOKEN,
8 | });
What to do??
You need to set your env variables (CONTENTFUL_ACCESS_TOKEN)
Thanks so much! I was looking for how to render embedded content!
Glad I could help!
Does anyone know how to set up draft mode/preview mode with Next.js 13 app router? I'm having a difficult time figuring it out. Any guidance would be appreciated!
I'll make a video on this 🙂
Amazing content! Thank you
Glad it was helpful!
what if I want to create multiple summary and content items within a blog article? lets say its a really long blog, do i need to add a new field for each summary and content items in contentful?
You can have one rich text field or multiple of them.
Hello there, I'm having a bad time doing the same with Next.js 13.4. I don't know how to pass in the function to loader without receiving this error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
Hey! can you please expand on what you're trying to do? I'm not sure what you mean by passing the function to loader...
There is a project called Lexical which is a good Rich Text Editor. There you go for an idea for a video. Use it to make your own api with nextjs. Now, you dont need strapi, contentful.. or other cms
Great! thanks for the suggestion!
@GabrielMartinez-ez9ue
Hey, thanks! I was really looking for an editor. Have you made any projects using Lexican?
@@7eleven.... Not yet 🙂
@@7eleven.... it’s quite easy to use. The docs are quite nice and easy to follow
I got this error when I cloned and run your repository TypeError: Expected parameter accessToken although I placed appropriate values in env file
You need to create a `.env.local` file and provide the `CONTENTFUL_SPACE_ID` and `CONTENTFUL_ACCESS_TOKEN`. You can get these from your Contentful dashboard.
Hey Thanks for this tutorial, ❤
For the RichText rendering, will the same code work without using tailwind/prose ? And just using the Contentful provides packages?
My pleasure! Yes it works without the Tailwind prose. That's just for styling.
Thanks. My images work locally, but their not showing up in prod. I'm getting a 400. Can you please help?
Welcome to the channel Siosaia! Are you using Contentful to serve up your images? If yes, are you using a custom loader or the default NextJs image loader?
How can I customize the post Body content styling
@Hamed Bahram
If you're using Tailwind typography plugin like I did in the video you can use the `prose` prefix to target all of your elements (e.g. `prose-h1` to target your `h1` tag that is inside a `prose` container), if you're not using Tailwind you can use the `@contentful/rich-text-react-renderer` package as I demonstrated in the video when creating the `RichText` component to customize how you style the content of your blog post body. Does that answer your question?
Fantastic!!! i love it a lot!! but what about Pages - like about us, services page, contact us page filling content from contentful please kindly explain on this....
Thanks! That's just the matter of creating pages/content in Contentful. I will probably have an updated version of this video that uses the App router.
37:49. I got the error. here.. Server Error
RangeError: Invalid time value
This error happened while generating the page. Any console logs will be displayed in the terminal window.
Source
lib/utils/index.js (3:9) @ format
1 | export function formatDate(dateString, options) {
2 | const { format } = new Intl.DateTimeFormat('en-US', options)
> 3 | return format(new Date(dateString))
| ^
4 | }
5 |
Call Stack
dateString
components/ui/DateComponent.jsx (6:18)
Show collapsed frames. do you know why?
The `dateString` parameter you've send to this function which is coming from Contentful is invalid. Check to see if you have defined a `date` field in your `Post` content type.
please build a blog with Strapi cms & using nextJs reactQuery ssr
Ok I'll keep that in mind
Does this work if I am fetching the HTML content string produced by the CKEDditor rich text in Django?
I mean.. I am using Django as my backend and inside Django is the Rich Text Editor CKEditor, so to parse the HTML content which comes as a string from the Json, I have tu use parse() from html-react-parser to render it as it should, but with the disadvantages that this way I lose the benefits of react smooth navigation when there are links in the content,
Can I solve this through this contentful react renderer??
Good question Henry, Contentful react renderer transforms json object returned from Contentful rich text to html or jsx. It doesn't work if you feed html string to it. Look at the docs here: www.npmjs.com/package/@contentful/rich-text-react-renderer
@@hamedbahram Thank you, it's been a hard stuff, because more than 3 days investigating and nothing, I hope someday Django or Next.js has a solution for this, thanks!
@@henryacero488 keep going!
I've been following this for a week, finally got to near the end, as i am building this in app router.
unfortunately, i absolutely don't understand how you got preview from the react functional component argument :/
but anyway this was a great tutorial!!! hoping this helps my portfolio so i can finally get an entry level job ... (i know it's not enough but it helps ig? )
I'm glad you found it helpful. I'd have to make an updated one for the app router.
@@hamedbahram I'd be so grateful! I've been trying to implement live-preview, i think most of your instructions are doable with a few tweaks in app router, but it wld be great if you add a short tutorial on implementing live-preview in app router since that's a new contentful feature that wasnt yet available when you published the vid :D
Amazing tutorial, I was wondring if Contentful is free? Can I publish as many content as I want?
Thanks Alexander. It's free to some extent, they do have a free tier, but check out their pricing page for more details.
Good Video! I have an issue here. I have deployed my website on vercel and now when I make changes on contentful websites they do not reflect on deployed site. Why?
Hey Hira, if you're using static site generation, `getStaticProps` in NextJs, your content will be fetched during the build and deploy process, therefore any changes you make to Contentful after that won't be reflected in your live site. To solve this you can either 1) set up a webhook in Contentful to trigger a re-deploy in Vercel whenever you make updates or 2) use ISR (incremental static regeneration) to revalidate your pages on a set time interval and get the fresh data from Contentful or 3) implement on-demand ISR endpoint to revalidate your data using a webhook.
Thanks its working with ISR.. 😊
@@hiraaziz6274 sweet!
@@hiraaziz6274 Hey, can you share your sourcecode for ISR ? May be repository link ?
Thanks.
Thank you so much
You're very welcome :)
Are you still going to do the MDX - Next13 course?
I just dropped my new NextJs course, and one of the projects we build in the course is a portfolio site using MDX. Here is a link to my NextJs course:
www.hamedbahram.io/courses/nextjs
That said, I also have a video on the channel about using MDX in NextJs if that's what you're looking for:
th-cam.com/video/NVO3CzYfrNs/w-d-xo.html
Unless you're talking about using MDX in the new NextJs 13 app directory, which is a video I'll publish on the channel in the coming weeks.
Let me know if that answers your question?
how can i use contentful within the app directory?
It works the same way Darel, you can fetch your content directly inside your React server components.
@@hamedbahram thanks for reply Hamed. So I don't need to have pages folder? Everything is doable inside app folder?
@@darelbvcr687 exactly!
Do you know how rich text is stored and processed in CMS? If I just add a rich text editor on my existing backend with a library like Quill or Draft, save the data as a whole to the database, and fetch the data every time I use it from the database instead of using a CMS. is it going to be less performant?
Generally speaking your data is stored as an object in the CMS, similar to what you get back from the API. I'm not sure what you're trying to accomplish, but adding another database layer on top of your CMS (which is just another database) doesn't seem to be necessary. Again, I'm not sure what problem you're facing with the rich text field.
@@hamedbahram Because I've already built a backend, I just want to add rich text editor functionality to it. So I am trying to build a custom rich text editor to avoid using a CMS and making extensive changes. I am not certain about how CMS platforms handle the data, as I have the impression that using a CMS may offer better performance. If I build a rich text editor and store the formatted data in my MongoDB database, will it function similarly to how a CMS handles it? Additionally, if there are images embedded in the formatted data, what would be the optimal way to store or process them?
I see. Yeah you can do that, if you store the formatted data in your mongo database, you've basically built your own CMS, and if indexed correctly, it would be as performant. PayloadCMS actually uses mongo in the backend, and it's open source, you can get some inspiration. As far as images, you can upload them to a service like Cloudinary or imgix and save the url back in your database, and when rendered in NextJs you can use a custom loader to optimize with `next/image`
@@hamedbahram thank you!
@@yunyang6267 Anytime!
how to add social share buttons like Facebook LinkedIn etc? in contentful blog?
You can use the following package to add social sharing to your app:
www.npmjs.com/package/react-share
@@hamedbahram any package for angular(social share buttons)
please do this tutorial in nextjs 13 and typescript that would be great
That's a great idea! thanks for the feedback.
When I import the client outside of the posts folder, i get this error. TypeError: Expected parameter accessToken
Did you create an `env` variable for your contentful access token?
@@hamedbahram yes
@@refl1x362 Not sure why you're getting this error 🤔 can you clone my code and confirm you still have the same problem?
@hamedbahram Yes. I Cloned your code and still the same error.
@@hamedbahram .
Amazing tutorial! Thanks!
My pleasure Agustin! Thanks for tuning in.
your videos help a lot to learn nextjs. I have a question. I have build a contentful blog. but i am failed to retrieve the thumbnails or feature image of a specific post from items.includes.asset. please, create a video about it.
I'm not sure if I understand the problem correctly. Try using my source code as a reference (link in the description).
@@hamedbahram ok
ty🎉
My pleasure!
are you using Next.js 12 or 13?
We're using NextJs 13 in this tutorial.