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.
What is Appgram Base?
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.
Key Features
- Universal styled-components — Styles are rendered on the server and injected into the HTML
<head>so the first paint includes all required CSS, with the rest loaded client-side. - Server-side rendering support — The example configures
babel-plugin-styled-components, which is required for styled-components to work during SSR. - Global theming — A styled-components
ThemeProvideris set up inside Next.js's customAppcomponent, so every page shares a theme. - Link collision workaround — Included example shows how to avoid the
asprop collision betweennext/linkand styled-components, using theforwardedAsprop. - One-click Vercel deployment — A Deploy with Vercel button is provided, which imports the repository directly from GitHub.
- CodeSandbox support — The example can be opened and edited on CodeSandbox via a direct link.
- Bootstrap via create-next-app — Run
npx create-next-app --example with-styled-components(or the Yarn equivalent) to scaffold the project locally.
Who should use Appgram Base?
- Next.js developers who want a ready-made styled-components configuration for server-side rendering without manually wiring up
Documentand Babel plugins. - Jamstack teams using DatoCMS as their CMS who need a base frontend that pulls content and renders styled pages.
- Developers migrating a styled-components site to Next.js who can use this base to understand the required patterns, including the Link
asprop workaround.
Use cases
- Content-driven sites — Build a blog or marketing site where content lives in DatoCMS and the Next.js frontend renders styled pages.
- Portfolio sites — Create a personal portfolio with a global theme and SSR styles, deployed on Vercel.
- Prototyping — Spin up a styled-components + Next.js project quickly using the
create-next-appexample command.
How does Appgram Base work?
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.
FAQ
Is Appgram Base free to use?
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.
How do I deploy Appgram Base to Vercel?
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.
How do I connect DatoCMS?
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.
Can I use this with a different CMS?
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.
