Newsletter
Join the Community
Subscribe to our newsletter for the latest news and updates
A Jamstack boilerplate combining Next.js, DatoCMS, and styled-components for SSR-styled React sites.
Appgram Base is a Jamstack boilerplate that pairs Next.js with DatoCMS and styled-components, giving you a pre-configured React setup where styles are server-side rendered on first load.
Appgram Base is a starting-point repository for Jamstack projects. It combines the Next.js React framework with DatoCMS as a headless content management system and styled-components for styling. The project outputs a static or server-rendered site deployable to Vercel. It is based on the official Next.js with-styled-components example, extended as a base for projects that manage content through DatoCMS.
<head> so the first paint includes all required CSS, with the rest loaded client-side.babel-plugin-styled-components, which is required for styled-components to work during SSR.ThemeProvider is set up inside Next.js's custom App component, so every page shares a theme.as prop collision between next/link and styled-components, using the forwardedAs prop.npx create-next-app --example with-styled-components (or the Yarn equivalent) to scaffold the project locally.Document and Babel plugins.as prop workaround.create-next-app example command.The repo relies on Next.js's custom _document to collect and inject server-side styled-components styles into the <head> of the initial HTML response. The custom _app wraps all pages with a ThemeProvider, and Babel transforms are handled by babel-plugin-styled-components. Deployment to Vercel is available through the provided button.
This is an open-source example repository, and the base code is free to use under the Next.js license. Hosting costs on Vercel are separate and depend on your chosen plan.
Use the Deploy with Vercel button in the repository README; it will ask you to connect your GitHub account and import the repository. Alternatively, run vercel from the project directory after installing the Vercel CLI.
The repository metadata lists DatoCMS as a project topic, indicating the base is intended to work with DatoCMS as the content backend. To use it, you would add your DatoCMS API token and content model, following DatoCMS's Next.js integration guides.
Since the styling and server-rendering setup is CMS-agnostic, you can replace DatoCMS with any headless CMS by modifying the data-fetching logic in your Next.js pages. The styled-components configuration remains unchanged.
