import React from 'react';
const TechBlog = () => {
return (
<div>
HELLO WORLD
</div>
);
};
export default TechBlog;
import { createClient } from 'contentful';
export async function getAllBlogPosts() {
const client = createClient({
space: '<Contentful space token>',
accessToken: '<API private key>',
});
const entries = await client.getEntries({
content_type: 'post',
});
return entries?.items?.map(item => {
const fields = item.fields;
return {
title: fields.title,
slug: fields.slug,
content: fields.content,
};
});
}
export const getStaticProps = async () => {
const posts = await getAllBlogPosts();
return {
props: { posts },
};
};
import React from 'react';
import Link from 'next/link';
const TechBlog = ({ posts }) => {
return (
<div>
<ul>
{posts.map((post => (
<li>
<Link as={`/${post.slug}`} href={`/[slug]`}>
<a>{post.title}</a>
</Link>
</li>
)}
</ul>
</div>
);
};
export default TechBlog;
next build && next export
export async function getSingleBlogPost(slug) {
const client = createClient({
space: '<Contentful space token>',
accessToken: '<API private key>',
});
const entry = await client.getEntries({
content_type: 'post',
limit: 1,
'fields.slug[in]': slug,
});
return entry?.items?.map(item =>{
const fields = item.fields
return {
title: fields.title,
slug: fields.slug,
content: fields.content,
};
})[0];
}
export const getStaticPaths = async () => {
const posts = await getAllBlogPosts();
const paths = posts?.map(({ slug }) => ({ params: { slug } })) ?? [];
return {
paths,
fallback: false,
};
};
export const getStaticProps = async (context) => {
const { slug } = context.params;
const post = await getSingleBlogPost(slug);
return {
props: { post },
};
};
import React from 'react';
import { documentToReactComponents } from '@contentful/rich-text-react-renderer';
const Post = ({ post }) => {
return (
<div>
<h2>{post.title}</h1>
{documentToReactComponents(post.content)}
</div>
);
};
export default Post;