Blog

This will create the blog-posts, authors, and categories Object types in your Bucket and add demo content.

This will add the files BlogCard.tsx,BlogList.tsx, and SingleBlog.tsx to your blocks folder located in cosmic/blocks/blog.

Add a new file located at app/blog/page.tsx with the following:

Add a new file located at app/blog/[slug]/page.tsx with the following which will use the slug in the URL to fetch the blog content.

See the pagination Block for installation steps and view the full examples below.

Enable draft preview by setting the status property on the Block. View the draft preview content by setting the ?status=any in the URL. Note: This is a basic example. It is advisable to consider a security strategy if you intend to keep your preview private.

To add the draft preview link in the dashboard, go to Blog Object type > Settings and add your preview link in the dashboard under Additional Settings. For example adding the link http://localhost:3000/blog/[object_slug]?status=any will add a Preview button to each blog post.

Add pagination with the pagination Block.

Use the load more pagination Block to fetch additional blog posts using a Server Action.

First, enable localization in the dashboard by going to Blog Object type > Settings under Additional Settings. Then set the locale on your specific Object. Finally, pass the locale parameter into the query to fetch your localized content. Create a new file at app/[locale]/blog/page.tsx with the following. Then go to any page with localization set, for example: https://localhost:3000/es/blog or https://localhost:3000/en/blog.