https://github.com/davbree/maroon-sloth
Jamstack site created with Stackbit
https://github.com/davbree/maroon-sloth
git headless jamstack nextjs ssg stackbit static
Last synced: 2 months ago
JSON representation
Jamstack site created with Stackbit
- Host: GitHub
- URL: https://github.com/davbree/maroon-sloth
- Owner: davbree
- Created: 2021-08-25T08:51:57.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2021-08-25T08:52:00.000Z (almost 5 years ago)
- Last Synced: 2025-06-06T03:40:45.423Z (about 1 year ago)
- Topics: git, headless, jamstack, nextjs, ssg, stackbit, static
- Language: JavaScript
- Homepage: https://jamstack.new
- Size: 2.13 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Stackbit Nextjs V2
A Nextjs page builder, component library and data fetcher.
## Quickstart
```
npm install
```
```
npm run dev
```
# How It Works
## Content
Content is sourced from the filesystem using [Sourcebit](https://github.com/stackbit/sourcebit). It loads markdown and json files stored in `content/pages` and `content/data` and tranforms them into page objects which are used by `getStaticProps()`.
* This theme comes with a pre-configured sourcebit config `sourcebit.js`
* This theme comes pre-configured to use `sourcebit.fetch()` in the `next.config.js`
```js
// next.config.js
const sourcebit = require('sourcebit');
const sourcebitConfig = require('./sourcebit.js');
sourcebit.fetch(sourcebitConfig);
module.exports = {
...
}
```
Whenever you run `npm run dev` or `npm run build` Sourcebit fetches content and outputs the `.sourcebit-nextjs-cache.json` file which contains an array of page objects.
Inside a Nextjs page route like `src/pages/[[...slug]].js` you can load page data by it's path using the `sourcebitDataClient.getStaticPropsForPageAtPath(path)` function inside of `getStaticProps`
```js
// src/pages/[[...slug]].js
export async function getStaticProps({ params }) {
const props = await sourcebitDataClient.getStaticPropsForPageAtPath(params.slug);
return { props };
}
```
## Components
This theme uses the [Stackbit component library](https://github.com/stackbit/stackbit-components)
* This theme comes pre-configured to use `withStackbitComponents()` in the `next.config.js`
```js
// next.config.js
const withStackbitComponents = require('@stackbit/components/with-stackbit-components');
module.exports = withStackbitComponents({
componentsMapPath: '.stackbit/components-map.json',
...
})
```
`withStackbitComponents` generates a dynamic import map for the Stackbit component library. This provides a framework to override existing Stackbit components and add your own new components. This approach reduces the bundle size by only importing components that are used.
* Generates `.stackbit/components-map.json` - Edit this file to override or add new components
* Generates `.stackbit/dynamic-components.js` - This file is dynamically generated from `components-map.json` and should not be edited or committed to git.
You can now use `getDynamicComponent(ComponentName)` in a Nextjs page.
```
// src/pages/[[...slug]].js
import { getDynamicComponent } from '@stackbit/components/components-registry';
function Page(props) {
console.log(props);
const { page, site } = props;
const { layout } = page;
const PageLayout = getDynamicComponent(layout);
return ;
}
```
## Tailwind
You can edit the tailwind config in `tailwind.config.js`
The Stackbit component library includes a number of preset Tailwind themes which you can use.
```js
// tailwind.config.js
module.exports = {
presets: [require('@stackbit/components/themes/tailwind.bold.config')],
mode: 'jit',
}
```