james-langridge/nextjs-contentful-marketing-blog

A statically generated marketing & blog site made with Next.js 13 and Contentful.

A statically generated marketing & blog site made with Contentful and the Next.js 13 beta features like the App Router and React Server Components.

About The Project

The content manager has complete flexibility to create new pages in Contentful, which are rendered as dynamic route segments, and statically generated at build time (Static Site Generation).

The site also includes a blog page and a contact form page.

Features

• New app directory routing,
• Data Fetching
• Route handlers
• Server Components
• Headless CMS with Contentful
• Styled using Tailwind CSS
• Written in TypeScript

Run it locally

Prerequisites

• You will need a Contentful account.
• You will need a Gmail account to work with nodemailer for the contact form. See the nodemailer docs.

Installation

1. Clone the repo

   git clone https://github.com/james-langridge/nextjs-contentful-marketing-blog.git

2. Install NPM packages

   npm install

3. Copy .env.example to .env.local and update the variables.

   cp .env.example .env.local

4. Import the content types into your Contentful space with the Contentful CLI. This only imports the content types that correspond with the React components. You will have to create pages and add content and assets in Contentful.

   npm install -g contentful-cli
   contenful login
   contentful space import --content-file ./lib/export.json

5. Start the development server:

   npm run dev

Deploy your own

You can clone and deploy this project on Vercel using the button below, provided you have completed the prerequisites above (email, Contentful CMS).

See the Next.js deployment documentation for more details.

License

Distributed under the MIT License.