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 likecontent/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
# 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
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 .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.
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
// 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;
}
}
}
}