A Quick Starter template for building a project using Next.js,Typescript,TailwindCSS, ESLint,prettier (boilerplate).

Waldo — Fri, 28 May 2021 03:13:41 +0000

This is a Next.js boilerplate with TailwindCSS and Typescript, Eslint, prettier

Github repository
https://github.com/zaakzaku/nextjs-typescript-tailwind-boilerplate

Getting Started

First, run the development server:

git clone https://github.com/zaakzaku/nextjs-typescript-tailwind-boilerplate
cd nextjs-typescript-tailwind-boilerplate
npm install
npm run dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying pages/index.js. The page auto-updates as you edit the file.

Learn More

To learn more about Next.js, take a look at the following resources:

Next.js Documentation - learn about Next.js features and API.
Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Next.js + TypeScript + Tailwind CSS project setup

Waldo — Thu, 27 May 2021 01:09:54 +0000

1. Set up the Next.js project
First, create-next-app use the command to create a codebase from the Next.js template.

npx create-next-app nextjs-ts-tailwind-example --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/basics-final"

When the command is completed, the code of Next.js is generated, so move the directory and check the operation.

cd nextjs-ts-tailwind-example
npm run dev

2. Set up typescript
create config files for typescript

touch tsconfig.json next-env.d.ts

Install the packages needed to run TypeScript.

npm install --save-dev typescript @types/react @types/node

add to the Typescript config file

//tsconfig.json 
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": false,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

add to the next-env.d.ts config file

/// <reference types="next" />
/// <reference types="next/types/global" />

Next, rewrite various js files to ts files by referring to the following repository.

mv components/date.js components/date.tsx
mv components/layout.js components/layout.tsx
mv lib/posts.js lib/posts.ts
mv pages/_app.js pages/_app.tsx
mv pages/index.js pages/index.tsx
mv 'pages/posts/[id].js' 'pages/posts/[id].tsx'
mv pages/api/hello.js pages/api/hello.ts

After rewriting, check the operation.

npm run dev

Check the operation with a browser and it is OK if it works without error.

3. Set up Tailwind css

npm install tailwindcss@latest postcss@latest autoprefixer@latest

generate a Tailwind CSS configuration file.

npx tailwindcss init -p

Then, tailwind.config.js the postcss.config.js two files will be generated.

//tailwind.config.js
module.exports = {
  purge: [], //remove this line 
  purge: ['./components/**/*.tsx', './pages/**/*.tsx','./public/**/*.html'], //add this line
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

//postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

Rewrite to read the CSS generated by Tailwind CSS styles/global.css.

//styles/global.css
@tailwind base;
@tailwind components;
@tailwind utilities;

Now you can use Tailwind CSS!

DEV Community: Waldo

A Quick Starter template for building a project using Next.js,Typescript,TailwindCSS, ESLint,prettier (boilerplate).

Getting Started

Learn More

Deploy on Vercel

Next.js + TypeScript + Tailwind CSS project setup