Strapi CMS Integration with Next.js

If you're building a website using Next.js and want to make updating your content super easy (without touching code everytime), Strapi CMS can be your best friend.

Strapi is an open-source headless CMS that lets you manage your content in a clean dashboard and delivers it via an API to your website. This means you can edit your portfolio projects, blogs, or about section anytime and your site updates instantly.

In this guide, I'll show you exactly how to connect Strapi with your Next.js portfolio, step by step.

---

If you're building a portfolio website using Next.js and want to make updating your content super easy (without touching code everytime), Strapi CMS can be your best friend.

Strapi is an open-source headless CMS that lets you manage your content in a clean dashboard and delivers it via an API to your website. This means you can edit your portfolio projects, blogs, or about section anytime and your site updates instantly.

In this guide, I'll show you exactly how to connect Strapi with your Next.js portfolio, step by step.

---

💡 Why Use Strapi with Next.js?

• No Code Content Updates - Add or edit projects, blogs, and other details directly from Strapi's admin panel.
• Faster Workflow - No need to redeploy your site manually.
• Full Control - It's self-hosted, so you control your data.
• API First - Works perfectly with Next.js via REST or GraphQL.

---

🛠 Step-by-Step: Integrating Strapi CMS with Next.js Portfolio

Step 1: Install and Set Up Strapi

• Make sure you have Node.js installed on your machine.
• Open your terminal and run:

      npx create-strapi-app@latest my-strapi-app

• Choose Quickstart for an easy setup.
• Once installed, run:

      cd my-strapi-app
      npm run develop

• Strapi will start and open an admin registration page in your browser http://localhost:1337/admin
• Create your admin account and you're ready to go.

---

Step 2: Create Your Content Types in Strapi

1. In the Strapi admin panel, click Content-Type Builder.
2. Create a new collection type - for example:
   • Projects → Fields: title, description, image, project URL.
   • Blogs → Fields: title, content, tags, cover image.
3. Save and restart Strapi when prompted.

---

Step 3: Add Content

1. Go to Content Manager in Strapi.
2. Add some sample projects or blog posts.
3. Publish them.

---

Step 4: Make Your API Public

By default, Strapi keeps APIs locked.

1. Go to Settings → Roles → Public.
2. Give find and findOne permissions for your content types.
3. Save changes.

---

Step 5: Connect Strapi to Next.js

• In your Next.js portfolio project, install Axios (for fetching data):

    npm install axios

• Create a helper file for API calls:

  // lib/api.js
  import axios from "axios";

  const API_URL = process.env.STRAPI_API_URL || "http://localhost:1337";

  export async function getProjects() {
    const res = await axios.get(`${API_URL}/projects`);
    return res.data;
  }

• Use it in your page:

  // pages/index.js
  import { getProjects } from "../lib/api";

  export default function Home({ projects }) {
    return (
      <div>
        <h1>My Projects</h1>
        {projects.map((project) => (
          <div key={project.id}>
            <h2>{project.title}</h2>
            <p>{project.description}</p>
          </div>
        ))}
      </div>
    );
  }

  export async function getStaticProps() {
    const projects = await getProjects();
    return { props: { projects } };
  }

---

Step 6: Deploy Strapi and Next.js

• Strapi → Host it on Render, Railway, or Heroku.
• Next.js → Deploy on Vercel.

Once deployed, update your API URL in lib/api.js to your live Strapi link.

---

🎯 Final Thoughts

Integrating Strapi with Next.js is not just easy - it's a game changer for managing your portfolio content. No more editing code files just to change a single word. You can focus on creating awesome work while Strapi handles your content.