Spaces

Understanding the Spaces concept in NestSaaS

What are Spaces?

Spaces are one of the most powerful and flexible concepts in NestSaaS.

Spaces allow you to create different types of content sections within a single NestSaaS installation, each with its own unique characteristics and presentation.

Think of "Spaces" as the main containers or sections of your website. Imagine a large box (representing the entire NestSaaS installation). Inside this box, you have several smaller, distinct boxes. Each of these smaller boxes is a "Space."

Key Elements within each Space:

Each "Space" contains its own set of:

  • Articles: These are the individual pieces of content (think blog posts, product descriptions, etc.). Each Space has its own set of articles. Imagine each smaller box having its own set of papers inside.
  • Groups, Categories, and Tags: These are used to organize the articles within each Space. They are specific to that Space and don't affect other Spaces. Think of dividers and labels within each smaller box, organizing the papers.
  • Metadata Structure: This defines the information associated with each article. Crucially, each Space can have a different metadata structure. One Space might have articles with "author," "date," and "tags," while another Space might have articles with "product ID," "price," and "dimensions." Think of each smaller box having a different form to fill out for each paper.
  • Presentation Logic: This determines how the articles are displayed on the website. Each Space can have its own unique layout and design. Think of each smaller box having a different window through which you view the papers.
  • Behaviors and Features: This refers to the specific functionalities available within each Space (e.g., commenting, sharing, etc.). Some Spaces might have commenting enabled, while others don't. Think of each smaller box having different tools available for working with the papers.

Key Features of Spaces

  • Flexible Content Modeling: Each Space can have its own article metadata structure
  • Independent Organization: Spaces have their own groups, categories, and tags
  • Custom Presentation: Different Spaces can have different layouts and designs
  • Isolated Content: Content in one Space doesn't interfere with other Spaces
  • Unified Management: All Spaces are managed through the same admin interface

Space Types

Space related code include Space Factory, Space Registory, Components, and Space Types Logics are located at spaces directory,

In NestSaaS, a Space Type defines:

  • The metadata structure of article within it
  • Form fields and validation schema for editing article metadata in the admin panel
  • How content is organized and presented
  • The specific behaviors and features available

NestSaaS includes several predefined Space types tailored for common use cases. You can easily customize them to fit your specific needs or extend to create new space types.

basic Space Type

A general-purpose content Space suitable for most content types that without need of special fileds.

// basic Space metadata configuration
{}

directories Space Type

Ideal for creating listing directories. directories space also provide a powerful grid view with categories/tags/featured filters, and sort.

// directories Space configuration
{
  logo: z
    .string()
    .refine(
      (val) => {
        if (!val) return true // allow empty value
        if (val.startsWith("/uploads/")) return true // allow local uploaded path
        try {
          new URL(val) // verify valid URL
          return true
        } catch (e) {
          return false
        }
      },
      {
        message: "Logo must be a valid URL or a path starting with /uploads/",
      }
    )
    .optional(),
  github: z.string().url().optional(),
  priceType: z.nativeEnum(PriceType).optional(),
  price: z.number().nonnegative().optional(),
  priceUrl: z.string().url().optional(),
  source: z.string().optional(),
}

digital Space Type

Designed for selling digital products with specific metadata for files, licenses, and versions.

// Example Digital Products Space configuration
{
  source: z.string().optional(),
  github: z.string().url().optional(),
  url: z.string().url().optional(),
  mediaId: z.number().optional(),
  price: z.number().nonnegative().optional(),
  priceId: z.string().optional(),
}

Creating and Configuring Spaces

Spaces are defined in the config/spaces.ts file. Each Space configuration includes:

  • name: Display name of the Space
  • slug: URL-friendly identifier used in routes
  • type: The type of Space (basic, directory, digital, etc.)
  • title: The title of the Space
  • description: Brief description of the Space's purpose
  • options: options if needed in this Space, optional

Using Spaces in Your Application

Accessing Space Data

You can access Space data in your template components code, refer to the predefined spaces to learn how to.

Space-Specific Routes

NestSaaS automatically creates routes for each Space based on its slug:

  • /{slug} - Space home page
  • /{slug}/[articleSlug] - Individual article page
  • /{slug}/categories - Category explore page
  • /{slug}/categories/[categorySlug] - Category page
  • /{slug}/tags - Tags explore page
  • /{slug}/tags/[tagSlug] - Tag page
  • /{slug}/search - Search page

Space-Specific Templates

You can create custom templates for different Space types and register them, then the space route will automatically render your components based on the spaceType, take home page, space article page for example:

// app/[slug]/page.tsx
...
{/* Render space page */}
{spaceFactory.renderComponent(spaceType, "SpacePage", {
  params,
  searchParams,
})}
...
// app/[slug]/[articleSlug]/page.tsx
...
{/* Render Space component */}
{spaceFactory.renderComponent(spaceType, "ArticlePage", {
  params,
})}
...

Best Practices for Spaces

  1. Plan Your Space Structure: Before creating Spaces, plan what types of content you need and how they should be organized.

  2. Use Meaningful Metadata: Design your metadata fields to capture the essential information for each content type.

  3. Keep Spaces Focused: Each Space should have a clear purpose and content type.

  4. Leverage Space-Specific Templates: Create custom templates for each Space type to provide the best presentation.

  5. Consider User Permissions: Set up appropriate permissions for each Space if different user groups will manage different content areas.

Example Use Cases

Multi-Section Website

Create different Spaces for products, tools, and article sections of your website.

Directory Website

Use Spaces to create different directory categories (restaurants, hotels, attractions) with specific metadata for each.

Digital Marketplace

Create Spaces for different product categories (templates, plugins, e-books) with appropriate metadata and presentation.

Next Steps