Stackbit Nextjs V2

The NextJs core starter for Stackbit.

Quickstart

npm install

npm run dev

Add a new page

Create a new markdown file content/pages/new-page.md with the following frontmatter.

---
title: 'New Example Page'
layout: 'AdvancedLayout'
sections:
  - type: HeroSection
    variant: variant-a
    colors: colors-a
    elementId: ''
    width: wide
    height: short
    topGap: small
    bottomGap: small
    alignHoriz: left
    alignVert: middle
    badge:
      label: New Collaboration
      elementId: ''
    title: The quick, brown fox jumps over **a lazy dog**
    text: >-
      Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
      doloremque laudantium, totam rem aperiam, eaque ipsa quae. explicabo.
    actions:
      - type: Button
        url: '#'
        label: Apply Now
        style: primary
        elementId: ''
      - type: Button
        url: '#'
        label: Learn more
        style: secondary
    feature:
      type: ImageBlock
      url: /images/fishing.jpg
      altText: Image alt text
      caption: Image caption
---

Visit http://localhost:3000/new-page/ to see the new page.

Note: The pages url will match the file path - content/pages/new-page.md will resolve to /new-page. A nested folder like content/pages/blog/index.md will resolve to /blog/

Add a menu item

Menu items are configured in content/data/config.json. Edit the config file and add a new menu object to the primaryLinks array.

// content/data/config.json
{
  "navBar": {
    // ...
    "primaryLinks": [
      // ...
      {
        "type": "Link",
        "label": "My New Page",
        "url": "/new-page",
        "altText": ""
      }
    ],
    // ...
  }
}

Adding more sections to the page

Add a 🧩 CtaSection to the page by adding the component to the the sections array.

# content/pages/new-page.md
---
title: 'New Example Page'
layout: 'AdvancedLayout'
sections: # sections array
  - type: 'HeroSection'
    # ...
  - type: 'CtaSection'
    variant: 'variant-a'
    width: 'wide'
    height: 'auto'
    alignHoriz: 'center'
    title: "Let's do this"
    text: 'The Stackbit theme is flexible and scalable to every need. It can manage any layout and any screen.'
    actions:
      - type: 'Button'
        url: '/contact'
        label: 'Get Started'
        style: 'primary'
---

Component Library: The Stackbit Component Library has full documentation on each component including the available props and frontmatter.

Component Examples

• 🧩 CtaSection
• 🧩 ContactSection
• 🧩 FeaturedPeopleSection
• 🧩 FeaturedPostsSection

Adding your own components

In this example we will create a new component that displays a grid of logos.

Create a new react component in src/components/LogoSection.js

import React from 'react'

const LogoSection = (props) => {
  const { logos, title } = props
  return (
    <div className="max-w-screen-xl mx-auto px-4 sm:px-6 py-14 lg:py-20 mt-10 mb-10 text-center">
      <h1 className="text-3xl tracking-tight sm:text-4xl mb-2">{title}</h1>
      <div className="flex justify-center items-center">
        {logos.map((logo, index) => (
          <div className="p-6" key={index}>
            <img className="mb-2" height="60px" width="60px" src={logo.image} />
            <h2 className="text-sm text-gray-400">{logo.name}</h2>
          </div>
        ))}
      </div>
    </div>
  )
}

export default LogoSection

Register the component in .stackbit/components-map.json

{
    "README": "Components set to 'null' will be loaded from @stackbit/components library. To override a component, set it to relative paths of your component",
    "components": {
        "Action": null,
        ...
        "LogoSection": "../src/components/LogoSection.js"
    },
    "dynamic": {
        "CheckboxFormControl": "@stackbit/components/components/CheckboxFormControl",
        ...
        "LogoSection": "../src/components/LogoSection.js"
    }
}

Add a new model for the LogoSection component. Create a new model file at .stackbit/models/LogoSection.yml

type: object
name: LogoSection
label: Logo section
fields:
  - type: string
    name: title
  - type: list
    name: logos
    items:
      type: object
      fields:
        - type: string
          name: name
        - type: image
          name: image

Extend the 🧩 AdvancedLayout model. Open the model file at .stackbit/models/AdvancedLayout.yml

type: page
name: AdvancedLayout
label: Advanced page
layout: AdvancedLayout
hideContent: true
fields:
  - type: string
    name: title
    label: Title
  - type: list
    name: sections
    label: Sections
    items:
      type: model
      models:
        - ContactSection
        ...
        - LogoSection

Add the component to the homepage content. Edit content/pages/index.md

---
title: Home
layout: AdvancedLayout
sections:
  - type: HeroSection
    ...
  - type: LogoSection
    title: "Our Partners"
    logos:
      - name: 'Stackbit'
        image: '/images/stackbit.svg'
      - name: 'NextJs'
        image: '/images/nextdotjs.svg'
---

Download the images and place them in the /public/images/ folder.

• https://simpleicons.org/icons/stackbit.svg
• https://simpleicons.org/icons/nextdotjs.svg

Extending a Stackbit component

In this example we will extend an existing Stackbit component.

Understanding Layouts

Explain how layouts work.

• How does the layout field work?
• How does the layout field effect which frontmatter fields can be used?
• The layout is both a component and a model. Explain this concept.

Editing the CSS

This theme uses Tailwind CSS and PostCSS. The tailwind.config.js includes our default style as a preset.

Changing the preset

You can use any preset from 🎨 Stackbit Styles

// tailwind.config.js
module.exports = {
  presets: [require('@stackbit/components/styles/retro/tailwind.retro.config')]
  // ...
}

Editing the Tailwind config

You can override any of the preset values in the extend object. In this example we change the themes primary color.

// tailwind.config.js
module.exports = {
  ...
  theme: {
    extend: {
      colors: {
          primary: '#207bea'
      }
    }
  },
  ...
};

Changing CSS Styles

The CSS is located in src/css/main.css. The default style is imported from the Stackbit components library - @import '@stackbit/components/styles/default/style.css';

You can add your own custom css or override existing styles.

// src/css/main.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@import '@stackbit/components/styles/default/style.css';

@layer components {
  .sb-badge {
    @apply uppercase;
  }
  .page-example {
    .component-content-section {
      .component-badge {
        padding: 10px 20px;
        text-transform: uppercase;
        border-radius: 3px;
      }
    }
  }
}