Content Management System

How It Works

The NextSaaS CMS, powered by Outstatic, provides a user-friendly interface for creating and editing website content without the need for a traditional database or server setup. All content is stored directly in your GitHub repository, making it easy to version control and manage your content alongside your code.

To see the changes on your website, you'll need to wait until your hosting platform (e.g., Vercel) finishes deploying it. If you are developing your site locally, you'll need to pull the changes to see them on your dev environment.

By default, the NextSaaS boilerplate has two collections: posts and pages, with examples for each. You can find them under outstatic/content.

When a new post is published, it will automatically show up at /posts. You can find more examples here: https://nextsaas.live/posts (opens in a new tab). You can also tag a post, and the NextSaaS boilerplate will take care of pagination and render them in a nice UI.

When a new page is published, it will automatically show up in the footer under the section "Pages." Here is an example page: https://nextsaas.live/pages/privacy-policy (opens in a new tab).

Outstatic Integration in NextSaaS

NextSaaS comes pre-configured with Outstatic, providing a seamless Content Management System experience. Here's what you need to know:

Setup

Outstatic requires certain environment variables to function properly. These are typically set in your .env file:

# Outstatic Configuration
OST_GITHUB_ID="your-github-oauth-app-id"
OST_GITHUB_SECRET="your-github-oauth-app-secret"
OST_TOKEN_SECRET="your-generated-token-secret"
OST_REPO_SLUG="your-repo-name"
OST_REPO_BRANCH="main"
OST_CONTENT_PATH="outstatic/content"

• OST_GITHUB_ID and OST_GITHUB_SECRET: Obtained from a GitHub OAuth App.
• OST_TOKEN_SECRET: A randomly generated string for security.
• OST_REPO_SLUG: Your GitHub repository name.
• OST_REPO_BRANCH: The branch where content will be stored (usually "main").
• OST_CONTENT_PATH: Directory for Outstatic content (default: "outstatic/content").

Make sure the remote repository is initialized.

Outstatic Page Component

NextSaaS has already set up the Outstatic page component at src/app/(cms)/outstatic/[[...ost]]/page.tsx. This component renders the Outstatic admin interface at /outstatic.

Using Outstatic Content

NextSaaS provides utility functions to easily retrieve and display Outstatic content. Here's an example of how to display posts:

import { getDocuments } from "@/lib/outstatic";
 
export default async function Posts() {
  const posts = await getDocuments("posts");
 
  return (
    <div>
      <h1>Blog Posts</h1>
      {posts.map((post) => (
        <article key={post.slug}>
          <h2>{post.title}</h2>
          <p>Published on: {new Date(post.publishedAt).toLocaleDateString()}</p>
        </article>
      ))}
    </div>
  );
}

This setup allows you to manage your content through the Outstatic interface and easily display it in your NextSaaS application.

Accessing the CMS Interface

To access the CMS, navigate to /outstatic in your browser. You will be redirected to the GitHub login page. Once authenticated, you can manage your content.

Advanced Features

• Custom Fields: Define custom fields in outstatic.config.ts for structured content.
• Media Management: Outstatic handles image uploads and storage within your repository.
• Markdown Support: Write content in Markdown for easy formatting.
• Version Control: All content changes are tracked in Git, allowing for easy rollbacks and collaboration.

Best Practices

1. Regular Backups: Although content is in Git, maintain separate backups of your repository.
2. Content Modeling: Plan your content structure carefully when defining collections and fields.
3. Performance: For large sites, implement caching strategies to optimize content loading.
4. Permissions: Manage GitHub permissions carefully to control who can edit content.

Troubleshooting

• Ensure your GitHub OAuth App has the correct permissions.
• Verify that all environment variables are correctly set.
• Check GitHub Actions logs for any deployment issues after content changes.

Useful Resources

• Outstatic Documentation (opens in a new tab)
• NextSaaS Documentation (opens in a new tab)
• Next.js Documentation (opens in a new tab)