Skip to main content

​
Requirements

The frontend installation guide assumes a standard Strapi setup, which is not covered in this documentation. Follow the official Strapi documentation for installation instructions. Before proceeding, install the Littlebox Strapi Suite Plugin. Follow the plugin installation guide. The full installation requirements are identical to those of NextJS and can be found in the NextJS documentation. Supported NextJS versions: 15.0.0 or later.

​
Installation

You have full access to the code, so the installation is based on a Next.js project that already implements all the concepts covered in this documentation. Simply clone the repository to get started. 
git clone https://github.com/littleboxstudio/strapi-suite-frontend.git

​
Environment variables

Rename the file .env.local.example to .env.local, and fill in the variables following the instructions below.

​
API_BASE_URL

This is the URL where the Strapi API is available. Locally, the port may vary depending on your setup, but if you followed the standard Strapi installation, the URL is likely to be http://localhost:1337.

​
API_TOKEN

This variable stores the API access token. Check the official documentation for more details about tokens. The frontend only needs read permissions. Follow the steps below to create an access token: Step 1: Access the Strapi admin panel.
Step 2: Go to the Settings -> API Tokens.
Step 3: Click “Add new API Token”.
Step 4: Choose unlimited duration.
Step 5: Select the Read-only token type.
Step 6: Save and copy the token. Make sure to do this before closing the screen, as you won’t be able to view it again.
Although the token is configured in the frontend, it is not exposed. Read the official Next.js documentation for more information.

​
SITE_URL

The domain of the application. Locally, the port depends on your setup, but by default the URL is http://localhost:3000.

​
REQUEST_REVALIDATE

The frontend uses fetch to call the API and retrieve the list of pages, specific page details, parameters, and the sitemap. By default, fetch requests are not cached, which can significantly impact performance. Read the official documentation. To solve this problem, the frontend sets a revalidate value in the headers of each request. This environment variable stores the number of seconds that Next.js should cache the HTML. For more details, read the official Next.js documentation.
In a development environment, set this value to 0 to disable caching. This allows you to see changes in real time directly in the browser.

​
NEXT_PUBLIC_SITE_URL

Unlike the SITE_URL variable, this variable is exposed to the frontend and represents the application’s domain.

​
NEXT_PUBLIC_STATIC_URL

In Strapi, you can upload static files, such as images. However, the URL of these images is tied to the Strapi admin domain, for example, https://admin.mydomain.com/uploads/.... This is not a good practice if you want to avoid exposing the backoffice URL. To fix this, the frontend uses a rewrite solution: leave the variable blank, and internally, without exposing the admin URL, NextJS rewrites the URL using the environment variable API_BASE_URL. For more details on how the rewrite works, read the official NextJS documentation. This variable is also useful if you use a CDN or external services to store static content.

​
Images

We recommend using the Next.js image component. To avoid exposing the admin URL, as explained in the previous section, you need to allow images only from specific external paths and block all others. This ensures that only images from your own account can be served. For more details, read the official Next.js documentation.
next.config.ts
const nextConfig: NextConfig = {
  //...
  images: {
    qualities: [100],
    remotePatterns: [
      //...
      {
        protocol: 'https',
        hostname: '*.mydomain.com',
        pathname: '/uploads/**',
      },   
    ],
  },
};

​
Run the development server

Prerequisite: If you haven’t set up the Littlebox Strapi Suite yet, an error will occur due to missing configurations. Follow the step-by-step tutorial to learn how to configure the entire application, both on the frontend and backend.
  1. Run npm run dev to start the development server.
  2. Visit http://localhost:3000 to view your application.

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.