A Nextjs page builder, component library and data fetcher.
npm install
npm run dev
Content is sourced from the filesystem using 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 thenext.config.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
// src/pages/[[...slug]].js
export async function getStaticProps({ params }) {
const props = await sourcebitDataClient.getStaticPropsForPageAtPath(params.slug);
return { props };
}
This theme uses the Stackbit component library
- This theme comes pre-configured to use
withStackbitComponents()
in thenext.config.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 fromcomponents-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 <PageLayout page={page} site={site} />;
}
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.
// tailwind.config.js
module.exports = {
presets: [require('@stackbit/components/themes/tailwind.bold.config')],
mode: 'jit',
}