Skip to main content

​
Prerequisites

Before starting the tutorial, make sure to follow these steps:
  1. Littlebox Strapi Suite Plugin: have the plugin installed and configured as described in the backend documentation.
  2. Littlebox Strapi Suite Frontend: have the frontend installed and configured as described in the frontend documentation.

​
Tutorial

​
Introduction

In this tutorial, you build your own app integrated with Strapi. This is a great way to experience a typical development workflow while learning key concepts, tools, and terminology used when building apps with Next.js and Strapi. Strapi lets you build different data structures based on your project’s needs. For demonstration purposes, you’ll create a collection type called Pages, where fields like title, slug, and seo are shared across all documents in that collection. Each section within a page will be a component that you can add or remove depending on the specific content of each page. You can also create each page as a single type, depending on how you want to organize your data. However, for this tutorial and better understanding, we recommend following our approach. Any document can be treated as a page, as long as it includes the following specifications:
  • The fields title, slug, and seo properly configured.
  • The template where the document data will be injected.

​
1. Set up the homepage

Access the Strapi admin panel at http://localhost:1337 (this may vary depending on your local setup). Go to the Content-Type Builder and create a new collection called Pages as shown in the image below. In the Advanced Settings tab, also enable Internationalization, we’ll cover this topic in more detail later. Go to the Content Manager, click on Pages under Collection Types, then click on Create new entry. Enter the title. Notice that the slug field fills in automatically. However, this won’t be the slug for the homepage, we’ll update this setting later in the tutorial. In the right-hand sidebar, under the Page Attributes section, select the default template. After you fill in the fields, click Save, then click Publish. In the left sidebar, go to Littlebox Strapi Suite, then click Settings under the Slug section. At the top right of the page, click Settings again. In the HOME PAGE field, select the document you created in the previous step. In the HOME PAGE SLUG STRATEGY field, choose the Language option. Read the documentation for a better understanding of the selected options. Notice that a HOMEPAGE tag appears next to the selected document. This indicates that the document has been set as the homepage. Run npm run dev to start the development server. Visit http://localhost:3000 to view your application.

​
2. Integrate fields into the template

All fields added to the document are injected into the template through the page property. For better understanding, open the file src/templates/default/index.tsx, which corresponds to the template selected in the previous step. Notice that the page property is injected into the template, containing all the properties of the document. 
interface Props {
  page: Page;
}

export default function Default({ page }: Props) {
  //...
}
Step 1: Access the Strapi admin panel.
Step 2: Go to the Content-Type Builder -> Pages.
Step 3: Click “Add another field to this collection type”.
Step 4: Select the Rich text (Markdown) type.
Step 5: Enter “description” as the name. Step 6: In the Advanced settings tab, check Required field and Enable localization for this field. Step 7: Click in “Finish” and “Save”.
You can adjust the view to better display the fields. Check the official Strapi documentation for more details.
Step 8: Go to the Content Manage and edit the home page.
Step 9: Enter “Littlebox Suite helped me build websites faster.” in the description field.
Step 10: Click “Save”, then “Publish”.
Step 11: Open the default template located in the src/templates/default/index.tsx folder.
Step 12: Replace the current code with the following code: 
<p className="pt-[20px] max-w-[650px] text-center text-[#b5b5b5]">
  {page.document.description}
</p>
Visit http://localhost:3000 to view the result.
For more information on how to retrieve data in the template, read the template documentation section.

​
3. Create components and dynamic zones

The approach in the previous step was meant to show the easiest way to edit content on the frontend from the admin panel. However, when you create new pages, the defined fields are the same for all of them. This is not a good practice, since the data architecture is defined at the collection level, not at the page level. To solve this issue, a good practice is to use components and dynamic zones. For more information on components and dynamic zones, visit the official Strapi documentation. Step 1: Access the Strapi admin panel.
Step 2: Go to the Content-Type Builder -> Pages.
Step 3: Delete the description field and click “Save”.
Step 4: In the sidebar menu, click “Create new component”.
Step 5: In the Basic settings tab, fill in the following values and click “Continue”. Step 6: Select Rich text (Markdown).
Step 7: In the Basic settings tab, fill in the following values and click “Finish”. Step 8: Click “Save”.
Step 9: Still in the Content-Type Builder, click “Pages” under the Collection Types section.
Step 10: Click “Add another field to this collection type”.
Step 11: Select Dynamic zone, fill in the following values, and click “Add components to the zone”. Step 12: Choose Use an existing component, select the text component, then click “Finish” and “Save”. Step 13: Go to the Content Manager and edit the home page.
Step 14: Click “Add component to components” and select the Text component. Step 15: Enter “Littlebox Suite helped me build websites faster.” and click “Save”, then “Publish”.
Step 16: Open the default template located in the src/templates/default/index.tsx folder.
Step 17: Replace the current code with the following code: 
<p className="pt-[20px] max-w-[650px] text-center text-[#b5b5b5]">
  {page.document.components
    .filter((component) => component.__component === "text.text")
    .map((component) => component.text)}
</p>
This approach allows pages to be modular and reuse components as needed - for example, a slider that is used across different templates.
Instead of rendering the content directly in the template, create reusable components and use properties to inject the content.
{page.document.components
  .filter((component) => component.__component === "text.text")
  .map((component) => 
    <text-component data={component} />
  )}

​
4. Create new templates

For better understanding, this section uses a news system as an example, with one page for the news list and another for the news details. The first step is to create the necessary templates for this system, both in the Strapi admin panel and on the frontend. Step 1: Access the Strapi admin panel.
Step 2: Go to the Littlebox Strapi Suite.
Step 3: Click “Template”.
Step 4: Click “Create new entry”. Step 5: Do the same for the news detail template. Step 6: Go to the Content-Type Builder and click “Create new collection type”.
Step 7: Fill in the fields with the following information: Step 8: Add the following fields:
Slug Text Rich text (Markdown) Media Component Step 9: Click “Save”.
Step 10: Click “Create new component”. Step 11: Click “Save”.
Step 12: Still in the Content-Type Builder, edit the Pages collection. Step 13: In the field list, under components, click “Add a component”. Step 14: Click “Save”.
Step 15: Go to the Content Manager -> post.
Step 16: Click “Create new entry” and fill in the fields.
Step 17: In the right-side panel, under the PAGE ATTRIBUTES section, select the News - Details template.
Step 18: Click “Save” and “Publish”.
Add at least 2 posts to help you follow the tutorial.
Step 19: Go to the Content Manager -> Pages.
Step 20: Click “Create new entry” and fill in the following values: Step 21: In the right-side panel, under the PAGE ATTRIBUTES section, select the News template.
Step 22: Click “Save” and “Publish”.
Step 23: Create the index.tsx file inside the src/templates/news folder and add the following code: 
"use client";

import Image from "next/image";
import { Roboto } from "next/font/google";
import Header from "@/app/components/header";
import { Page } from "@/app/core/types";
import { useRouter } from "next/navigation";
interface Props {
  page: Page;
}

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
});

export default function Index({ page }: Props) {
  const router = useRouter();
  return (
    <div className={`${roboto.className} w-full min-h-screen flex flex-col bg-radial from-[#373737] to-[#0a0a0a]`}>
      <div className="w-full pt-[40px] pr-[40px] flex">
        <Header />
      </div>
      <div className="w-full flex flex-col flex-1 justify-center items-center">
        <h1 className="text-[24px]">News List</h1>
        <div className="pt-[20px] max-w-[650px] text-center text-[#b5b5b5] flex flex-col">
          {page.document.components
            .filter((component) => component.__component === "post-list.post-list")
            .map((component) => {
              return component.posts.map((post) => (
                <div key={post.id} className="flex items-cente mb-2">
                  <div className="w-[30px] h-[30px] rounded-full overflow-hidden flex justify-center items-center mr-2">
                    <img src={post.image.url} className="w-full h-full object-cover" />
                  </div>
                  <a
                    onClick={() => router.push(post.slug)}
                    className="max-w-[650px] text-center text-[#b5b5b5] hover:text-[#ffffff] cursor-pointer"
                  >
                    {post.title}
                  </a>
                </div>
              ));
            })}
        </div>
      </div>
      <div className="w-full pb-[40px]">
        <a
          className="flex justify-center items-center"
          href="https://github.com/littleboxstudio/strapi-frontend"
          target="_blank"
        >
          <Image src="/github.svg" alt="Littlebox Strapi Suite Github" width={24} height={24} />
          <span className="pl-[10px]">Github</span>
        </a>
      </div>
    </div>
  );
}
Visit http://localhost:3000/news to view the result. Step 24: Create the index.tsx file inside the src/templates/news-details folder and add the following code: 
"use client";

import Image from "next/image";
import { Roboto } from "next/font/google";
import Header from "@/app/components/header";
import { Page } from "@/app/core/types";
interface Props {
  page: Page;
}

const roboto = Roboto({
  weight: "400",
  subsets: ["latin"],
  display: "swap",
});

export default function Index({ page }: Props) {
  return (
    <div className={`${roboto.className} w-full min-h-screen flex flex-col bg-radial from-[#373737] to-[#0a0a0a]`}>
      <div className="w-full pt-[40px] pr-[40px] flex">
        <Header />
      </div>
      <div className="w-full flex flex-col flex-1 justify-center items-center">
        <h1 className="text-[24px]">{page.document.title}</h1>
        <div className="pt-[20px] max-w-[650px] text-center text-[#b5b5b5] flex flex-col">
          <div className="w-[400px] h-[250px] rounded-[10px] overflow-hidden flex justify-center items-center mr-2">
            <img src={page.document.image.url} className="w-full h-full object-cover" />
          </div>
          <p className="w-[400px] text-justify pt-5">{page.document.text}</p>
        </div>
      </div>
      <div className="w-full pb-[40px]">
        <a
          className="flex justify-center items-center"
          href="https://github.com/littleboxstudio/strapi-frontend"
          target="_blank"
        >
          <Image src="/github.svg" alt="Littlebox Strapi Suite Github" width={24} height={24} />
          <span className="pl-[10px]">Github</span>
        </a>
      </div>
    </div>
  );
}
Visit http://localhost:3000/news and click one of the posts to see the result.
Notice that the post’s URI doesn’t include the parent page, which in this case is the “news” page.
Step 25: Go to the Content Manager -> post and edit one of the posts.
Step 26: In the right-side panel, under the PAGE ATTRIBUTES section, select the News page as the parent.
Step 27: Click “Save” and “Publish”. Do the same for all posts. Visit http://localhost:3000/news and click one of the posts to see the result.
Notice that the post’s URI now includes the parent page.

​
5. Create menus and navigation

​
6. Inject content into the template

​
7. Internationalization

​
8. Parameters

​
9. SEO

Backend

Learn how to install the plugin and use the endpoints for better integration with the frontend.

Hosting

Explore our hosting solutions for staging and production environments.