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.
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.
- 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
- 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 generatenpx prisma db push- Run locally or deploy on Vercel
npm run devOpen 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.
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 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)
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.
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.