nextjs-starter-project Tailwind Templates

Nextjs Starter Project

A NextJS starter project with eslint, typescript and tailwind css as well as our recommended folder structure.

Typescript + NextJS + Tailwind CSS Starter Project.

A sample Typescript + NextJS + Tailwind CSS starter project.

It followed the tutorial found on: https://www.delasign.com/blog/how-to-create-a-typescript-nextjs-project-that-uses-tailwind-css/

Please note that this guide uses Tailwind CSS. To learn more about Tailwind CSS please visit: https://tailwindcss.com

Getting Setup

  1. Download the repository.
  2. Run yarn install to install all the dependencies.
  3. Run yarn start to initiate the development environment.

Available Scripts

In the project directory, you can run:

npm dev

Runs the app in the development mode. Open http://localhost:3000 to view it in the browser.

The page will reload if you make edits. You will also see any lint errors in the console.

npm start

Launches the app in production mode. Requires you to have built the app first.

npm run build

Builds the app for production to the build folder.

📰 Guides

  1. How to create a Typescript NextJS project that uses Tailwind CSS 🔗
  2. Our recommended structure for ReactJS, GatsbyJS or NextJS projects 🔗
  3. Typescript & React Redux: A Quick Setup Guide (2022) 🔗
  4. How to setup NextJS to work with Contentful 🔗

📚 Tutorials

Basics

  1. How to create and use environment variables in an .env file in NextJS 🔗
  2. How to create and use aliases in NextJS 🔗
  3. How to lint on save in a NextJS project using VSCode 🔗
  4. How the NextJS app router works 🔗
  5. How to add static or dynamic metadata to a NextJS page 🔗
  6. Building Static Sites with Next.js: A Hands-On Tutorial 🔗
  7. How to add a sitemap to a NextJS website 🔗
  8. NextJS Static Site doesn't show images 🔗
  9. How to create a 404 page in a NextJS project 🔗

Vercel

  1. How to deploy a NextJS project to Vercel 🔗
  2. How to add, edit or remove environment variables in Vercel 🔗
  3. How to get the URL of a deployed Vercel project 🔗
  4. How to deploy code updates to a Vercel project 🔗
  5. How to deploy branches of a Vercel project 🔗
  6. How to manually redeploy a Vercel project 🔗

Contentful

  1. How to setup NextJS to work with Contentful 🔗
  2. How to setup NextJS to work with images hosted on Contentful 🔗

Top categories

Loading Svelte Themes