Nextjs Deals Blog

This is a Next.js, Tailwind CSS deals blogging starter template. Its based on the Next App directory with React Server Component and uses Contentlayer to manage markdown content.

Check out the documentation below to get started.

Facing issues? Check the Issues page and do a search on past issues. Feel free to open a new issue if none has been posted previously.

Motivation

I wanted to create a deals website using Nextjs and Tailwind CSS but there was no easy out of the box template to use so I decided to create one.

I wanted it to be nearly as feature-rich as popular blogging templates like beautiful-jekyll and Hugo Academic but with the best of React's ecosystem and current web development's best practices.

Features

Next.js with Typescript
Contentlayer to manage content logic
Easy styling customization with Tailwind 3.0 and primary color attribute
MDX - write JSX in markdown documents!
Mobile-friendly view
Light and dark theme
Font optimization with next/font
Integration with Umami for analytics
Command palette search with cmdk

Quick Start Guide

Clone the repo

git clone https://github.com/rfrlcode/gift-cards

Change the .env.example to .env
Create a hosted mysql instance. Mine is hosted on Aiven. The have a generous free tier.
Copy and paste the connection url of your mysql instance in the .env file.
Install dependencies

npm install --legacy-peer-deps

Create and publish your prisma schema

npx prisma generate

npx prisma db push

Run locally or deploy on Vercel

npm run dev

Open http://localhost:3000 with your browser to see the result. Note: If you do not have any content on in your database, you will not see any deals.

Post

Content is modelled using Contentlayer, which allows you to define your own content schema and use it to generate typed content objects. See Contentlayer documentation for more information.

Frontmatter

Frontmatter follows Hugo's standards.

Please refer to contentlayer.config.ts for an up to date list of supported fields. The following fields are supported:

title (required)
date (required)
summary (required)
tags (required)
coverImage (required)

Deploy

Vercel
The easiest way to deploy the template is to deploy on Vercel. Check out the Next.js deployment documentation for more details.

Netlify Netlify’s Next.js runtime configures enables key Next.js functionality on your website without the need for additional configurations. Netlify generates serverless functions that will handle Next.js functionalities such as server-side rendered (SSR) pages, incremental static regeneration (ISR), next/images, etc.

See Next.js on Netlify for suggested configuration values and more details.

Contributing

I love contributors! Here's how you can contribute:

Open an issue if you believe you've encountered a bug.
Follow the above quick start guide to get your local dev environment set up.
Make a pull request to add new features/make quality-of-life improvements/fix bugs.

rfrlcode / gift-cards