9 min read
Building a blog with React and Next.js
Amy Kline
In this tutorial, we'll explore how to build a blog using React and Next.js.
Prerequisites
Before we get started, you'll need to have the following:
- A basic understanding of React
- A basic understanding of Next.js
- A text editor (we recommend using VS Code)
Step 1: Create a new Next.js app
To get started, we'll create a new Next.js app. Open up your terminal and run the following command:
npx create-next-app blog
This will create a new Next.js app called blog in the current directory. Next, we'll navigate into the blog directory and start the Next.js development server:
cd blog
npm run dev
This will start the Next.js development server on port 3000. You can now visit http://localhost:3000 in your browser to view your new Next.js app.
Step 2: Create a new page
Now that we have our Next.js app set up, we can start creating our blog. To do this, we'll create a new page called posts/[slug].js. Run the following command to create the page:
touch pages/posts/[slug].js
This will create a new page called pages/posts/[slug].js in the pages directory. Next, we'll add some content to the page:
import Head from "next/head";
export default function Post({ post }) {
return (
<>
<Head>
<title>{post.title}</title>
</Head>
<h1>{post.title}</h1>
<p>{post.brief}</p>
<img src={post.heroImage} alt={post.title} />
<p>{post.readTimeInMinutes} minute read</p>
<p>{post.createdAt}</p>
<p>{post.author}</p>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</>
);
}This will render the title, brief, hero image, read time, creation date, author, and content of the blog post.
Step 3: Create a new API route
Next, we'll create a new API route called api/posts/[slug].js. Run the following command to create the API route:
touch pages/api/posts/[slug].js
This will create a new API route called pages/api/posts/[slug].js in the pages/api directory. Next, we'll add some content to the API route:
## Step 4: Create a new component
Now that we have our API route set up, we can start creating our blog. To do this, we'll create a new component called `Post.js`. Run the following command to create the component:
```bash
touch components/Post.js
This will create a new component called components/Post.js in the components directory. Next, we'll add some content to the component:
import { useRouter } from "next/router";
import useSWR from "swr";
import Post from "../components/Post";
const fetcher = (url) => fetch(url).then((res) => res.json());
export default function PostPage() {
const router = useRouter();
const { slug } = router.query;
const { data, error } = useSWR(`/api/posts/${slug}`, fetcher);
if (error) return <div>Failed to load</div>;
if (!data) return <div>Loading...</div>;
return <Post post={data} />;
}This will fetch the blog post data from the API route and pass it to the Post component.
Step 5: Create a new page
Now that we have our component set up, we can start creating our blog. To do this, we'll create a new page called posts.js. Run the following command to create the page:
touch pages/posts.js
This will create a new page called pages/posts.js in the pages directory. Next, we'll add some content to the page:
import { useRouter } from "next/router";
import PostPage from "../components/PostPage";
export default function Posts() {
const router = useRouter();
const { slug } = router.query;
return <PostPage slug={slug} />;
}Conclusion
In this tutorial, we explored how to build a blog using React and Next.js. We created a new Next.js app, created a new page, created a new API route, created a new component, and created a new page. We also learned how to fetch data from an API route and pass it to a component.
Resources
ChatGPT
This post was generated by ChatGPT and is an example of how you can create your own blog posts with Scalerepo.
Suparepo is a production-ready SaaS boilerplate
Skip the tedious parts of building auth, org management, payments, and emails