Getting started
This guide walks through connecting your content from your Type CMS project to NextJS. For consistency, we will be working with the project we set up in the article Getting Started with Your First Type CMS Project.
If you would like to skip this article and are looking for the repository for this project, you can find it on our Github here: https://github.com/typecms/nextjs-blog-template
Creating our NextJS project
Let's start by installing the latest version of NextJS using create-next-app. For the setup prompt, we'll use the following options:
- Yes on using TypeScript
- Yes on using ESLint
- Yes on using Tailwind CSS
- No on using the src directory
- No on customizing the default import alias
npx create-next-app@latestWe now have a clean install of NextJS. Your folder structure should look like this:
Now let's start our local server.
npm run devIf we navigate to http://localhost:3000 in our browser, we should see our running instance of NextJS.
Connecting our Type CMS project to Next.js
Our first step to connecting our Type CMS project with our Next.js application is to add our project token and project ID to our env file.
Next, in our root project directory, we are going to create a new folder called components. In this folder, we'll add some helper functions as well as some react components later to help us build out our blog. For now, I have two files fetchEntries.ts, which is a helper function to fetch content from Type CMS, and formatDate.ts, a helper function to easily format our publish date for our blog in a human-readable format.
Here's what our fetchEntries.ts function looks like:
We'll reuse this across our application by passing a query to the function and an optional format parameter. If you are experienced with querying data from MongoDB, you’ll find the queries you use with the Content API to be very similar. Because the RTE in Type CMS returns JSON by default, we can pass format=html to the Content API to have Type CMS automatically convert our JSON to HTML for display in our blog. This is not required, but can be useful for simpler use cases such as this demo.
When you call the function to fetch your entries, you should see the following response from the Content API:
We have an array of entries that match our query, the number of entries found (count), the number of entries skipped (for pagination), the limit set on the number of entries returned from the API, and any sort parameters that we passed to the API.
Now let's add this function to our blog homepage, so we can populate the page with our first blog post that we created.
Our blog home page should now have our first blog post populated from the Content API.
Now that we have our blog home page, let's create our blog article page to view the contents of our blog post. We'll add a route to our blog folder for our [slug] parameter that we want to pass to our blog post to fetch the content tied to that slug. Within the [slug] folder, we'll create a page.tsx file. From our root directory in our Next.js app, the route to the blog post page will be /app/blog/[slug]/page.tsx.
Here's our blog post page.tsx file to fetch our blog post created in Type CMS:
In the query we pass to the fetchEntries function, we are telling the Content API to return all blog posts where the slug in our template matches the slug passed in the URL. This will allow us to reuse the same blog template for all of our blog posts. Our blog post page now successfully pulls in our content.
The time it took us to create a new Type CMS project, create our first blog post and connect our Type CMS project to Next.js was about 30 minutes. You can take this project a step further by uploading your blog project to Vercel or Netlify to have a live, working blog that fetches content in real-time from your Type CMS project in no time.
You can access the repository for this article on our Github here: