---

nextjs-typescript-tailwindcss-firebase

---

This is a starter template for Next.js projects with TypeScript and Tailwind CSS. Includes Firebase authentication and database.

---

Getting Started

---

Configuration

Firebase config:

Register a new web app under your Firebase project and copy the config to your .env.local file:

NEXT_PUBLIC_FIREBASE_API_KEY

NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN

NEXT_PUBLIC_FIREBASE_PROJECT_ID

NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET

NEXT_PUBLIC_FIREBASE_MESSAGING_SET

NEXT_PUBLIC_FIREBASE_APP_ID

NEXT_PUBLIC_BASE_URL

TypeScript config:

tsconfig.json

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

Tailwind config:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,ts,jsx,tsx}",
    "./components/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [require("tailwind-scrollbar-hide"), require("tailwind-scrollbar")],
};

NextJS config:

next.config.js

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
}

module.exports = nextConfig

---

Installation

---

Install dependencies:

npm install
# or
yarn

Development

Start the development server:

npm run dev
# or
yarn dev

Production

Build the application:

npm run build
# or
yarn build

Start the application:

npm run start
# or
yarn start

License

MIT

Let's Connect!