After so much time working with Contentful and Next, I never found a single consistent way of starting a project,
and all starters that tried have their own caveats, some are too basic without touching the real problems like handling GraphQL query complexity limits or are too strict.
I'm not saying this starter is better as there are many ways to accomplish the same thing when building with these technologies.
Anyway, it was a lot of fun building it, exploring the nice features of React SSR inside Next.js, and playing with Contentful content modeling capabilities.
🚨 WARNING 🚨
This project is the culmination of my own experimentations with Next.js and Contentful and it may not be suitable for your needs.
All contents present in Contentful are fake, mostly generated using AI tools like ChatGPT and DALL-E.
Project is deployed live at https://netcs.vercel.app/
- ⚡️ Next.js 14 with App router
- ⚛️ React 18
- ✨ TypeScript
- 💨 TailwindCSS + 🌻 DaisyUI
- 🌞 Contentful Headless CMS
- 🗄️ Turso DB
- 👷 Code on Github under the MIT License.
- 🌩️ Hosted on Vercel but be free to use a compatible hosting solution that you prefer
- 📦 Code Editor Field App for Contentful
- 📦 Readingtime App for Contentful
- Flexible and composable content models
- SEO ready with Metadata being generated based on specific SEO fields but with fallbacks in place
- Generation of GraphQL (schema, and types), in sync with the content types via graphql-codegen.
- Typescript
- Tailwind CSS via DaisyUI
- Nextjs SSR components
- Contentful Live preview
- Contentful Dashboard example App for visualizing stats on Articles views counts
- Access to a Contentful space (you can register for free here https://www.contentful.com/get-started/)
- Optionally Turso DB is required for newsletter signups and article views counter.
- An environment where you can run Node 18+
- pnpm installed
- Clone the repo
- Install with pnpm
git clone git@github.com:pauloamgomes/netcs.git
cd netcs
pnpm install
cp .env.example .env
# Grab your Contentful Space ID, Environment ID and Access Token and update the .env file
# CONTENTFUL_SPACE_ID=<your-space-id>
# CONTENTFUL_ENVIRONMENT_ID=<your-environment-id>
# CONTENTFUL_ACCESS_TOKEN=<your-access-token>
# CONTENTFUL_MANAGEMENT_TOKEN=<your-mgmt-token>- Create a Turso database
- Get an Auth token
- Place the Turso database url and auth token in your .env file
- Run the migration command and push the migrations
# install and check installed version
brew install tursodatabase/tap/turso
turso --version
# signup/auth
turso auth signup # signup with github
# db creation
turso db create netcs-db # choose your own db name
# get db endpoint and auth token
turso db show netcs-db
turso db tokens create netcs-db
# run and push the migrations
pnpm run db:generate
pnpm run db:push
# check on the Turso dashboard for your changes or run the editor locally
pnpm run db:studioIn order to be able to start the local server Contentful needs to have all content models created along with the example data, you can easily do it using the command:
pnpm run contentful:importThe above command will import all example data you can see in this example website in your space.
WARNING
You need to have an empty environment without any content models created. You need to install 2 Contentful Apps mentioned when running the import command. You can optionally install 1 Contentful Apps mentioned when running the import command. Please also note that the migration data is using a default Contentful locale en-US, if you want a different locale you'll need to manipulate the exported data by replacing in the migration JSON file all keys containing en-US.
If you did all the previous steps without errors and you feel courageous you can try to start the local server by running:
pnpm run devand you should see:
> graphql-codegen --config codegen.ts
✔ Parse Configuration
✔ Generate outputs
▲ Next.js 14.0.2
- Local: http://localhost:3000
- Environments: .env
✓ Ready in 1113msAnd voila, it works! 🎉
Open http://localhost:3000 with your browser to see the result.
MIT License, see LICENSE.