Overview

This article introduces a statically generated image slider that is built using GSAP, Next.js, and the Strapi CMS. It provides step-by-step instructions on how to set up the Strapi environment, create entries with images and captions, configure permissions, set up environment variables, and run the Next.js application in development mode.

Features

• Statically generated image slides
• Built with GSAP for smooth animation
• Utilizes Next.js for server-side rendering

Installation

To install and set up the theme, follow these steps:

Step 1: Set up Strapi environment

• Create a mongodb.com account and an AWS S3 bucket
• Set the environment variables on the wild-slider-cms site:
  • DATABASE_URI: mongodb+srv://:@cluster0.vbxof.mongodb.net/?retryWrites=true&w=majority
  • DATABASE_NAME: YOUR_DATABASE_NAME
  • AWS_API_ID: YOUR_AWS_S3_ID
  • AWS_API_KEY: YOUR_AWS_S3_KEY
  • AWS_API_REGION: YOUR_AWS_API_REGION
  • AWS_BUCKET_NAME: YOUR_AWS_BUCKET_NAME

Step 2: Set up Strapi locally

• Run the Strapi server locally, which will open http://localhost:1337/
• Create an admin user when prompted

Step 3: Create Entries data

• Go to Content-Types -> Entries
• Click on “Add new entries”
• Upload assets from the slider folder for the cover image
• Select an image for each entry
• Write a caption and save and publish

Step 4: Set permissions

• Go to Settings & Roles and edit the Public role
• Select count, find, and findone permissions for Entries

Step 5: Set up environment variables

• While the Strapi server is running, open a new terminal and navigate to the Next.js app directory
• Copy the .env.local.example file to .env.local
• Set the following variables in .env.local:
  • STRAPI_PREVIEW_SECRET: a random string for Preview Mode
  • NEXT_PUBLIC_STRAPI_API_URL: http://localhost:1337
  • NEXT_PUBLIC_STRAPI_API_URL_GRAPHQL: http://localhost:1337/graphql

Step 6: Run Next.js in development mode

• Make sure the local Strapi server is still running at http://localhost:1337
• Inside the Next.js app directory, run the command to start the application
• Access the wild-slider application at http://localhost:3000 and verify that the entries are displayed

Summary

This article provides a guide on how to install and set up a statically generated image slider using GSAP, Next.js, and the Strapi CMS. It covers the process of setting up the Strapi environment, creating entries with images and captions, configuring permissions, setting up environment variables, and running the Next.js application in development mode. The resulting application should display the created entries as image slides.