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 text 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”.
This approach allows pages to be modular and reuse components as needed - for example, a slider that is used across different templates.

​
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: Select “Template”.
Step 4: Click “Create new entry”. Step 5: Do the same for the news detail template. Step 6: Go to the “Content Manager” and click “Create new entry”.
Step 7:

​
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.