LaunchPad

https://github.com/strapi/launchpad
Admin
LaunchPad is the official Strapi demo application that combines a headless CMS backend with a...
Tokens:5,488
Snippets:60
Trust Score:9.8
Update:6 months ago
Show doc for...
Tokens:
Raw
### Project Setup and Development Commands

Source: https://context7.com/strapi/launchpad/llms.txt

Essential CLI commands for cloning, installing dependencies, seeding data, and running the development environment for the Launchpad project.

```bash
yarn install
yarn setup
yarn seed
yarn dev
```

--------------------------------

### Install Yarn Package Manager

Source: https://github.com/strapi/launchpad/blob/main/README.md

Instructions for enabling or installing the Yarn package manager, which is a prerequisite for the project.

```shell
corepack enable
```

```shell
npm install -g yarn
```

--------------------------------

### Setup and Seed Project Data

Source: https://github.com/strapi/launchpad/blob/main/README.md

Commands to run the project setup scripts and populate the Strapi instance with initial demo content.

```shell
yarn setup
```

```shell
yarn seed
```

--------------------------------

### Clone and Initialize Project

Source: https://github.com/strapi/launchpad/blob/main/README.md

Commands to clone the repository and install the necessary root dependencies.

```shell
git clone https://github.com/strapi/launchpad.git
cd launchpad
yarn install
```

--------------------------------

### Start Development Servers

Source: https://github.com/strapi/launchpad/blob/main/README.md

Command to launch both the Strapi backend and the Next.js frontend concurrently.

```shell
yarn dev
```

--------------------------------

### Strapi CLI: Start Production Server

Source: https://github.com/strapi/launchpad/blob/main/strapi/README.md

Starts the Strapi application with autoReload disabled, suitable for production environments. Use npm or yarn to execute this command.

```bash
npm run start
```

```bash
yarn start
```

--------------------------------

### Strapi CLI: Start Development Server

Source: https://github.com/strapi/launchpad/blob/main/strapi/README.md

Starts the Strapi application with the autoReload feature enabled, which is useful during development. This command is typically run using npm or yarn.

```bash
npm run develop
```

```bash
yarn develop
```

--------------------------------

### Next.js Migration Commands (Bash)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Provides bash commands used for migrating a Next.js project. It includes an initial failed attempt using yarn dlx and the successful migration using npx, along with the command to install packages with legacy peer dependency support.

```bash
# Initial migration attempt (failed due to yarn dlx)
yarn dlx @next/codemod@canary upgrade ./

# Successful migration using npm
npx @next/codemod@canary upgrade ./

# Package installation with legacy peer deps
npm install --legacy-peer-deps
```

--------------------------------

### GET /api/preview

Source: https://context7.com/strapi/launchpad/llms.txt

Enables or disables Next.js draft mode for previewing unpublished Strapi content.

```APIDOC
## GET /api/preview

### Description
Enables Next.js draft mode for previewing unpublished Strapi content. It requires a secret token for security and redirects to the specified URL with draft mode enabled.

### Method
GET

### Endpoint
/api/preview

### Parameters
#### Query Parameters
- **secret** (string) - Required - The security token matching PREVIEW_SECRET environment variable.
- **url** (string) - Optional - The target URL to redirect to after enabling draft mode. Defaults to '/'.
- **status** (string) - Optional - Set to 'published' to disable draft mode, otherwise enables it.

### Request Example
GET /api/preview?secret=my_secret&url=/blog/post-1&status=draft

### Response
#### Success Response (307)
- Redirects to the specified URL with draft mode cookies set.
```

--------------------------------

### GET /api/exit-preview

Source: https://context7.com/strapi/launchpad/llms.txt

Exits the Next.js draft mode, clearing the preview cookies.

```APIDOC
## GET /api/exit-preview

### Description
Disables Next.js draft mode and clears the associated cookies.

### Method
GET

### Endpoint
/api/exit-preview

### Response
#### Success Response (200)
- Draft mode disabled.
```

--------------------------------

### Strapi CLI: Deploy Application

Source: https://github.com/strapi/launchpad/blob/main/strapi/README.md

Initiates the deployment process for your Strapi application. This command is typically used with yarn and may require additional configuration depending on your deployment target.

```bash
yarn strapi deploy
```

--------------------------------

### Strapi CLI: Build Admin Panel

Source: https://github.com/strapi/launchpad/blob/main/strapi/README.md

Builds the admin panel for your Strapi application. This command compiles the necessary assets for the admin interface and can be executed using npm or yarn.

```bash
npm run build
```

```bash
yarn build
```

--------------------------------

### Configure Next.js Internationalization

Source: https://context7.com/strapi/launchpad/llms.txt

Defines supported locales and demonstrates how to fetch localized content from Strapi. It includes logic for mapping localized slugs to support language switching.

```typescript
export const i18n = {
  defaultLocale: 'en',
  locales: ['en', 'fr'],
} as const;

export default async function HomePage({ params }: { params: Promise<{ locale: string }> }) {
  const { locale } = await params;
  const [pageData] = await fetchCollectionType('pages', {
    filters: { slug: { $eq: 'homepage' }, locale: locale }
  });
  return <PageContent pageData={pageData} />;
}
```

--------------------------------

### Environment Variable Configuration

Source: https://context7.com/strapi/launchpad/llms.txt

Standard environment variable templates for both the Next.js frontend and Strapi backend. These variables manage API endpoints, security tokens, and deployment URLs.

```bash
NEXT_PUBLIC_API_URL=http://localhost:1337
ADMIN_JWT_SECRET=your_jwt_secret
CLIENT_URL=http://localhost:3000
```

--------------------------------

### Manage Shopping Cart State with Context

Source: https://context7.com/strapi/launchpad/llms.txt

Provides a CartProvider and useCart hook to manage shopping cart state globally. It includes methods for adding items, updating quantities, removing items, and calculating totals.

```typescript
'use client';
import { CartProvider, useCart } from '@/context/cart-context';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <CartProvider>
      {children}
    </CartProvider>
  );
}

function ProductCard({ product }: { product: any }) {
  const { addToCart, items, removeFromCart, updateQuantity, getCartTotal } = useCart();
  return (
    <div>
      <h3>{product.name}</h3>
      <button onClick={() => addToCart(product)}>Add to Cart</button>
      <p>Cart Total: ${getCartTotal()}</p>
    </div>
  );
}
```

--------------------------------

### Fetch Single Types with Strapi Client

Source: https://context7.com/strapi/launchpad/llms.txt

Retrieves singleton content types such as global settings or page configurations. Useful for accessing site-wide data like navigation, footers, and SEO defaults.

```typescript
import { fetchSingleType } from '@/lib/strapi';

const globalData = await fetchSingleType('global', {
  locale: 'en'
});

const navbar = globalData.navbar;
const footer = globalData.footer;
const defaultSeo = globalData.seo;

const blogPageConfig = await fetchSingleType('blog-page', {
  locale: 'en'
});

console.log(blogPageConfig.heading);
console.log(blogPageConfig.sub_heading);

const productPageConfig = await fetchSingleType('product-page', {
  locale: 'fr'
});
```

--------------------------------

### Enable Next.js Draft Mode for Strapi Preview

Source: https://context7.com/strapi/launchpad/llms.txt

This API route enables or disables Next.js draft mode based on a secure token. It validates the request against an environment variable and redirects the user to the requested preview URL.

```typescript
import { draftMode } from 'next/headers';
import { redirect } from 'next/navigation';

export const GET = async (request: Request) => {
  const { searchParams } = new URL(request.url);
  const secret = searchParams.get('secret');
  const url = searchParams.get('url') ?? '/';
  const status = searchParams.get('status');

  if (secret !== process.env.PREVIEW_SECRET) {
    return new Response('Invalid token', { status: 401 });
  }

  const draft = await draftMode();

  if (status === 'published') {
    draft.disable();
  } else {
    draft.enable();
  }

  redirect(url);
};
```

--------------------------------

### Normalize Strapi Image URLs

Source: https://context7.com/strapi/launchpad/llms.txt

Provides a helper function to prepend the API base URL to relative Strapi media paths. It ensures external URLs remain untouched and facilitates seamless integration with the Next.js Image component.

```typescript
import { strapiImage } from '@/lib/strapi/strapiImage';
import Image from 'next/image';

function ArticleImage({ article }: { article: Article }) {
  return (
    <Image
      src={strapiImage(article.image.url)}
      alt={article.image.alternativeText || article.title}
      width={800}
      height={400}
    />
  );
}
```

--------------------------------

### Generate Next.js SEO Metadata from Strapi

Source: https://context7.com/strapi/launchpad/llms.txt

Uses the generateMetadataObject utility to transform Strapi SEO component data into Next.js metadata objects. This supports OpenGraph and Twitter card configurations for dynamic page SEO.

```typescript
import { generateMetadataObject } from '@/lib/shared/metadata';
import { fetchSingleType } from '@/lib/strapi';
import { Metadata } from 'next';

export async function generateMetadata({ params }: { params: Promise<{ locale: string }> }): Promise<Metadata> {
  const { locale } = await params;
  const pageData = await fetchSingleType('blog-page', { locale });
  const seo = pageData.seo;
  return generateMetadataObject(seo);
}
```

--------------------------------

### Strapi API Error Handling (TypeScript)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Implements graceful error handling for Strapi API fetch requests to prevent application crashes due to 400 errors. It logs the error and returns fallback data, ensuring application stability.

```typescript
async function fetchContentType(slug: string, spreadData: boolean = false) {
  const url = new URL(`/api/content-type-builder/content-types/${slug}`, process.env.STRAPI_URL);
  try {
    const response = await fetch(url.toString());
    if (!response.ok) {
      console.error(`Failed to fetch data from Strapi (url=${url.toString()}, status=${response.status})`);
      return spreadData ? null : { data: [] };
    }
    const data = await response.json();
    return data;
  } catch (error) {
    console.error('Error fetching Strapi data:', error);
    return spreadData ? null : { data: [] };
  }
}
```

--------------------------------

### Render Strapi Dynamic Zones in React

Source: https://context7.com/strapi/launchpad/llms.txt

The DynamicZoneManager component maps Strapi component types to React components. This approach supports modular content rendering and efficient bundle splitting.

```typescript
import DynamicZoneManager from '@/components/dynamic-zone/manager';

export default function PageContent({ pageData }: { pageData: any }) {
  const dynamicZone = pageData?.dynamic_zone;

  return (
    <div className="relative overflow-hidden w-full">
      {dynamicZone && (
        <DynamicZoneManager
          dynamicZone={dynamicZone}
          locale={pageData.locale}
        />
      )}
    </div>
  );
}
```

--------------------------------

### Fetch Collection Types with Strapi Client

Source: https://context7.com/strapi/launchpad/llms.txt

Retrieves multiple documents from a Strapi collection. Supports filtering, locale selection, and population of related fields with built-in caching.

```typescript
import { fetchCollectionType } from '@/lib/strapi';
import type { Article, Product } from '@/types/types';

const articles = await fetchCollectionType<Article[]>('articles', {
  filters: {
    locale: { $eq: 'en' }
  }
});

const featuredProducts = await fetchCollectionType<Product[]>('products', {
  filters: {
    featured: { $eq: true },
    locale: { $eq: 'en' }
  },
  populate: ['images', 'categories', 'plans']
});

const [homePage] = await fetchCollectionType('pages', {
  filters: {
    slug: { $eq: 'homepage' },
    locale: 'en'
  }
});
```

--------------------------------

### Dynamic Zone Component SSR Fix (TypeScript)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Fixes SSR compatibility issues in a dynamic zone component for Next.js 15 by adding the 'use client' directive and ensuring unique key generation. This prevents server-side rendering errors and ensures proper client-side hydration.

```typescript
import React from 'react';

// Assuming componentData and index are props or available in scope
// Example usage within a component:
// <div key={`${componentData.__component}-${componentData.id}-${index}`}>...
```

--------------------------------

### Three.js Globe Component NaN Error Handling (TypeScript)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Implements client-side only rendering and robust error handling for a Three.js Globe component to prevent BufferGeometry NaN errors. It includes coordinate validation, safe accessor functions, and try-catch blocks for animations, ensuring stability.

```typescript
import React, { useState, useEffect } from 'react';

const GlobeComponent = ({ data }) => {
  const [isMounted, setIsMounted] = useState(false);

  useEffect(() => {
    setIsMounted(true);
  }, []);

  if (!isMounted) {
    return null; // Render nothing on the server
  }

  // Function to safely access arc data, with NaN validation
  const safeGetArcData = (arc) => {
    if (!arc || typeof arc.startLat === 'undefined' || typeof arc.endLat === 'undefined') {
      console.warn('Invalid arc data:', arc);
      return null;
    }
    // Further validation for coordinates...
    return arc;
  };

  // Function to handle animations with try-catch
  const animateGlobe = () => {
    try {
      // Animation logic here...
    } catch (error) {
      console.error('Animation error:', error);
    }
  };

  // ... rest of the component logic using safeGetArcData and animateGlobe

  return (
    <div>
      {/* Globe rendering logic */}
    </div>
  );
};

export default GlobeComponent;
```

--------------------------------

### Fetch Individual Documents by ID

Source: https://context7.com/strapi/launchpad/llms.txt

Retrieves a single document from a collection using its unique documentId. Supports deep population of relations for detailed views.

```typescript
import { fetchDocument } from '@/lib/strapi';

const article = await fetchDocument<Article>('articles', 'abc123xyz', {
  populate: ['image', 'categories', 'dynamic_zone']
});

const product = await fetchDocument<Product>('products', 'prod456', {
  locale: 'en',
  populate: {
    images: true,
    plans: {
      populate: ['features']
    },
    categories: true,
    perks: true
  }
});
```

--------------------------------

### Revalidate Cache with Strapi Webhooks

Source: https://context7.com/strapi/launchpad/llms.txt

Provides programmatic cache invalidation for frontend content. Typically used within webhook handlers to ensure the site reflects the latest updates from the CMS.

```typescript
import { revalidateContent } from '@/lib/strapi';

revalidateContent('collection', 'articles');
revalidateContent('document', 'articles', 'abc123xyz');
revalidateContent('single', 'global');

export async function POST(request: Request) {
  const { model, entry } = await request.json();

  if (model === 'article') {
    revalidateContent('document', 'articles', entry.documentId);
    revalidateContent('collection', 'articles');
  }

  return new Response('Revalidated', { status: 200 });
}
```

--------------------------------

### React Key Prop Fix (TypeScript)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Resolves React key prop warnings by replacing mapped fragments with keyed div elements. This ensures each element in a list has a unique and stable identifier for efficient updates.

```typescript
// Example usage within a mapped list:
// <div key={`form-input-${index}`}>
//   {/* Form input elements */}
// </div>
```

--------------------------------

### Hydration Mismatch Fix with Deterministic IDs (TypeScript)

Source: https://github.com/strapi/launchpad/blob/main/next/migration-log.md

Replaces `useId()` and `Math.random()` with deterministic IDs to resolve hydration mismatches in React 19. This ensures consistent ID generation between server and client rendering.

```typescript
// Example usage within a loop or mapped component:
// const id = `circle-line-${index}`;
// <div id={id}>...</div>
```
Tokens:
Raw