Next.js + Tailwind CSS + Typescript + PrismaJS

This project is created and configured using Yarn, so you might wanna add another dependencies or edit any installed dependencies using Yarn to prevent error and stuff like that.

This Next.js template is using the following system:

1. CSS Framework: Tailwind CSS

   This example shows how to use Tailwind CSS (v2.2) with Next.js. It follows the steps outlined in the official Tailwind docs.

   It uses the new Just-in-Time Mode for Tailwind CSS.

2. Language: Typescript

   I've also adding and setting up everything using Typescript, so you can just use it without need to installing other things.

   Why am i using Typescript? because it's came in handy while managing to work with large scale project. Also the Intellsense features (If you're using Visual Studio Code) helps me so much.

3. Linter: Eslint and Prettier

   I've configure the EsLint and Prettier in best way as possible, you don't need to change anything unless you understand what you're doing.

   Linter are here to format and check the consistency of your code, if your code is a mess, the linter would say there's an error in your code even thought the code would just working fine.

   Also the Format code on save is on if you use Visual Studio Code to code, you could turn that off by configure the settings on /.vscode/settings.json file.

4. Database Library: Prisma

   This is not a database, but a library to help you read and write from/to your database. This library is, of course, optional.

   Prisma is a server-side library that helps your app read and write data to the database in an intuitive and safe way.

   Prisma helps app developers build faster and make fewer errors with an open source database toolkit for PostgreSQL, MySQL, SQL Server, and SQLite.

   • To learn more about Prisma: Click Here
   • To learn how prisma works with Next.js: Click Here

Scripts / Commands

# Linting
yarn lint

# Building
yarn build

# Publish
yarn start

# Developer Mode
yarn dev

Preview

Preview the example live on StackBlitz:

Deploy your own

Deploy the example using Vercel:

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example https://github.com/raflymln/nextjs-template/tree/main my-nextjs-project
# or
yarn create next-app --example https://github.com/raflymln/nextjs-template/tree/main my-nextjs-project

Deploy it to the cloud with Vercel (Documentation).