Add a free CMS to your Next.js website with Outstatic
In this blog post, we will explore the step-by-step process of integrating Outstatic into a Next.js website, allowing for efficient content management and improved performance. The installation should take less than 10 minutes.
Requirements: A Next.js 13+ website and a GitHub Account.
Let’s walk through the steps to create a GitHub OAuth Application, this is needed for authentication:
First go to the "Register a new OAuth application" page on GitHub by clicking here.
App name: This could be My Blog or anything you want.
Authorization callback URL:
You can leave the Application description field empty.
Click on Register application. You'll be redirected to your GitHub Oauth App settings page.
Next, click on Generate a new client secret. Once done, keep this tab open. We'll need these values for our next steps.
First install the Outstatic package and dependencies:
You will need to create two files in your Next.js
/app folder. They have a very similar structure, but notice that the first one is under
/app while the second under
Copy the following contents to the
And for the
Start your dev server. Assuming you're on
http://localhost:3000 you can access your dashboard at
You should see this page:
You will need to add the following variables to your
Restart your service and reload the
If everything is setup correctly, then you'll see a login page and will be able to access your Dashboard.
Now that you have completed the installation and setup process of Outstatic, you can start creating content for your website.
For more information on managing your website's content and fetching data from Outstatic, please refer to the Outstatic documentation.