Simple blog starter template with Next.js and caisy

📣 Important Notice: Page Router -> App Router

This repository is now utilizing the new Next.js App Router, which will become the default standard going forward. Should you be interested in a version that uses the legacy AppRouter, you can find it at the following repository: starter-template-next-simple-blog-pagerouter. Please note that it is compatible with this repository, and you can follow along the onboarding process just the same.

Deploy this template to Vercel

Features

• ✅ 100/100 Lighthouse performance
• ✅ SEO-friendly with canonical URLs and OpenGraph data
• ✅ Dynamic content updates from caisy without redeployment
• ✅ Sitemap support
• ✅ Robots.txt support

Requirements

In order to have the right blueprints configured, make sure to follow the onboarind on caisy.io and select the starter template "Simple Blog" To run this project a .env.local file like this (with your own projects values) is required:

CAISY_PROJECT_ID=a894c383-edfc-4499-a639-a40509986ed4
CAISY_API_KEY=xxx

To run this project locally

• git clone https://github.com/caisy-io/starter-template-next-simple-blog.git
• create .env.local file with your project id and API key - see .env.sample
• npm install
• npm run dev

In order to have the right blueprints configured, make sure to follow the onboarind and select the starter template "Simple Blog"

We are using

• Next.js as server and server side rendering framework
• tailwindcss for styling
• @caisy/rich-text-react-renderer to render the caisy richtexts in react
• graphql and graphql-request to fetch data from caisy

Codegen

During development we generate code using

• @graphql-codegen/cli and plugins

🧞 Commands

All commands are run from the root of the project, from a terminal:

Command	Action
npm install	Installs dependencies
npm run dev	Starts local dev server at localhost:3000
npm run gen	Regenerates generated types and SDK
npm run gen:watch	Wachting changes and regenerates generated types and SDK
npm run build	Build your production site to ./dist/

App Router

• The app Router

The App Router is a new paradigm for building applications using React's latest features.

In version 13, Next.js introduced a new App Router built on React Server Components, which supports shared layouts, nested routing, loading states, error handling, and more.

The App Router works in a new directory named app. The app directory works alongside the pages directory to allow for incremental adoption. This allows you to opt some routes of your application into the new behavior while keeping other routes in the pages directory for previous behavior. If your application uses the pages directory, please also see the Pages Router documentation.

• Component Hierarchy

The React components defined in special files of a route segment are rendered in a specific hierarchy:

• layout.js

• template.js

• error.js (React error boundary)

• loading.js (React suspense boundary)

• not-found.js (React error boundary)

• page.js or nested layout.js

In a nested route, the components of a segment will be nested inside the components of its parent segment.

See More About NEXT.JS Using App Router

Next.js x Caisy

👀 Want to learn more?

Feel free to check caisy documentation Feel free to check Next.js documentation