├── .env.example ├── .eslintrc.json ├── .gitignore ├── .husky └── pre-commit ├── .prettierignore ├── .prettierrc ├── README.md ├── __tests__ └── home.spec.ts ├── app ├── favicon.ico ├── globals.css ├── layout.tsx └── page.tsx ├── components.json ├── e2e └── home.spec.ts ├── jest.config.ts ├── jest.setup.ts ├── lib └── utils.ts ├── next.config.js ├── package-lock.json ├── package.json ├── playwright.config.ts ├── postcss.config.js ├── public ├── next.svg └── vercel.svg ├── tailwind.config.ts └── tsconfig.json /.env.example: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anayatkhan1/Nextjs-template/491d3b8a6f04d05945c464671ed81c298fa6aac0/.env.example -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | 27 | # env files 28 | .env 29 | .env*.local 30 | # vercel 31 | .vercel 32 | 33 | # typescript 34 | *.tsbuildinfo 35 | next-env.d.ts 36 | /test-results/ 37 | /playwright-report/ 38 | /playwright/.cache/ 39 | 40 | .nvmrc -------------------------------------------------------------------------------- /.husky/pre-commit: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | . "$(dirname "$0")/_/husky.sh" 3 | 4 | npx lint-staged 5 | npm run test -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .next 3 | yarn.lock 4 | package-lock.json 5 | public 6 | .history 7 | .env 8 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "avoid", 3 | "jsxSingleQuote": false, 4 | "proseWrap": "always", 5 | "printWidth": 80, 6 | "trailingComma": "es5", 7 | "tabWidth": 4, 8 | "semi": true, 9 | "singleQuote": false, 10 | "plugins": ["prettier-plugin-tailwindcss"] 11 | } 12 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Next.js 14+ Starter Template 2 | ![ray-so-export](https://github.com/anayatkhan1/Nextjs-template/assets/73161735/328586cc-d2af-4e3b-a5ee-9d26bf678f41) 3 | 4 | 5 | ## Features 6 | 7 | - ⚡ **Next.js 14+**: Take advantage of the latest features and optimizations of the Next.js framework. 8 | - 🔍 **TypeScript**: Develop with strong typing and improved code quality. 9 | - 🚀 **ESLint and Prettier**: Ensure consistent code style and catch errors early. 10 | - 🐶 **Husky and Lint-Staged**: Enforce code quality with pre-commit hooks. 11 | - 💡 **Shadow and Background Snippets**: Accelerate development with helpful shadow and background snippets. 12 | - 🖼️ **Shadcn UI Library**: Integrate Shadcn UI library for building beautiful user interfaces effortlessly. 13 | - 🃏 **Jest and Testing Library**: Write and run tests with ease to ensure robustness. 14 | - 🎭 **Playwright**: Automate browser testing for comprehensive coverage. 15 | - 📊 **Vercel Analytics and Vercel SpeedInsight**: Monitor and optimize performance for better user experiences. 16 | 17 | 18 | ## Getting Started 19 | 20 | 1. Clone this repository: `git clone ` 21 | 2. Navigate to the project directory: `cd ` 22 | 3. Install dependencies: `npm install` or `yarn install` 23 | 4. Start the development server: `npm run dev` or `yarn dev` 24 | 25 | ## Scripts 26 | 27 | - `npm run dev` or `yarn dev`: Start the development server. 28 | - `npm run build` or `yarn build`: Build the production-ready application. 29 | - `npm start` or `yarn start`: Start the production server. 30 | - `npm test` or `yarn test`: Run tests. 31 | - `npm run lint` or `yarn lint`: Lint the codebase. 32 | - `npm run format` or `yarn format`: Format code using Prettier. 33 | 34 | ## Contributing 35 | 36 | Contributions are welcome! Feel free to open issues or pull requests to suggest improvements, report bugs, or add new features. 37 | -------------------------------------------------------------------------------- /__tests__/home.spec.ts: -------------------------------------------------------------------------------- 1 | import Home from "@/app/page"; 2 | describe("Home", () => { 3 | test("Home page should be exist", () => { 4 | expect(Home).toBeTruthy(); 5 | }); 6 | }); 7 | -------------------------------------------------------------------------------- /app/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anayatkhan1/Nextjs-template/491d3b8a6f04d05945c464671ed81c298fa6aac0/app/favicon.ico -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 240 10% 3.9%; 9 | 10 | --card: 0 0% 100%; 11 | --card-foreground: 240 10% 3.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 240 10% 3.9%; 15 | 16 | --primary: 240 5.9% 10%; 17 | --primary-foreground: 0 0% 98%; 18 | 19 | --secondary: 240 4.8% 95.9%; 20 | --secondary-foreground: 240 5.9% 10%; 21 | 22 | --muted: 240 4.8% 95.9%; 23 | --muted-foreground: 240 3.8% 46.1%; 24 | 25 | --accent: 240 4.8% 95.9%; 26 | --accent-foreground: 240 5.9% 10%; 27 | 28 | --destructive: 0 84.2% 60.2%; 29 | --destructive-foreground: 0 0% 98%; 30 | 31 | --border: 240 5.9% 90%; 32 | --input: 240 5.9% 90%; 33 | --ring: 240 10% 3.9%; 34 | 35 | --radius: 0.5rem; 36 | } 37 | 38 | .dark { 39 | --background: 240 10% 3.9%; 40 | --foreground: 0 0% 98%; 41 | 42 | --card: 240 10% 3.9%; 43 | --card-foreground: 0 0% 98%; 44 | 45 | --popover: 240 10% 3.9%; 46 | --popover-foreground: 0 0% 98%; 47 | 48 | --primary: 0 0% 98%; 49 | --primary-foreground: 240 5.9% 10%; 50 | 51 | --secondary: 240 3.7% 15.9%; 52 | --secondary-foreground: 0 0% 98%; 53 | 54 | --muted: 240 3.7% 15.9%; 55 | --muted-foreground: 240 5% 64.9%; 56 | 57 | --accent: 240 3.7% 15.9%; 58 | --accent-foreground: 0 0% 98%; 59 | 60 | --destructive: 0 62.8% 30.6%; 61 | --destructive-foreground: 0 0% 98%; 62 | 63 | --border: 240 3.7% 15.9%; 64 | --input: 240 3.7% 15.9%; 65 | --ring: 240 4.9% 83.9%; 66 | } 67 | } 68 | 69 | @layer base { 70 | * { 71 | @apply border-border; 72 | } 73 | body { 74 | @apply bg-background text-foreground; 75 | } 76 | } 77 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from "next"; 2 | import { Analytics } from "@vercel/analytics/react"; 3 | import { SpeedInsights } from "@vercel/speed-insights/next"; 4 | import { Inter as FontSans } from "next/font/google"; 5 | import { cn } from "@/lib/utils"; 6 | import "./globals.css"; 7 | 8 | const fontSans = FontSans({ 9 | subsets: ["latin"], 10 | variable: "--font-sans", 11 | }); 12 | 13 | export const metadata: Metadata = { 14 | title: "Create Next App", 15 | description: "Generated by create next app", 16 | }; 17 | 18 | export default function RootLayout({ 19 | children, 20 | }: { 21 | children: React.ReactNode; 22 | }) { 23 | return ( 24 | 25 | 26 | 27 | 28 | 34 | {/** Background Snippets --> https://bg.ibelick.com/ */} 35 |
36 |
37 |
38 |
{children}
39 | 40 | 41 | 42 | 43 | ); 44 | } 45 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | export default function Home() { 2 | return ( 3 |
4 |
5 |
6 | Next JS Starter 7 |
8 |
9 |
10 | ); 11 | } 12 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "app/globals.css", 9 | "baseColor": "zinc", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /e2e/home.spec.ts: -------------------------------------------------------------------------------- 1 | import { test } from "@playwright/test"; 2 | 3 | test.describe("landing", () => { 4 | test("landing page", async ({ page }) => { 5 | await page.goto("/"); 6 | }); 7 | }); 8 | -------------------------------------------------------------------------------- /jest.config.ts: -------------------------------------------------------------------------------- 1 | const nextJest = require("next/jest"); 2 | 3 | const createJestConfig = nextJest({ 4 | dir: "./", 5 | }); 6 | 7 | /** @type {import('jest').Config} */ 8 | 9 | const config = { 10 | setupFilesAfterEnv: ["/jest.setup.ts"], 11 | roots: ["./__tests__"], 12 | testEnvironment: "jest-environment-jsdom", 13 | preset: "ts-jest", 14 | transform: { 15 | "^.+\\.jsx?$": ["ts-jest", { tsconfig: "./tsconfig.jest.json" }], 16 | }, 17 | }; 18 | 19 | module.exports = createJestConfig(config); 20 | -------------------------------------------------------------------------------- /jest.setup.ts: -------------------------------------------------------------------------------- 1 | import "@testing-library/jest-dom"; 2 | -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge"; 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {}; 3 | 4 | module.exports = nextConfig; 5 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs", 3 | "description": "Next js starter kit", 4 | "author": "Anayat khan", 5 | "version": "0.1.0", 6 | "private": true, 7 | "scripts": { 8 | "dev": "next dev", 9 | "build": "next build", 10 | "start": "next start", 11 | "lint": "eslint . --ext ts --ext tsx --ext js", 12 | "format": "prettier --write .", 13 | "test": "jest", 14 | "test:watch": "jest --watchAll", 15 | "test:e2e": "npx playwright test", 16 | "prepare": "husky" 17 | }, 18 | "lint-staged": { 19 | "*.@(ts|tsx)": [ 20 | "npm run lint", 21 | "npm run format" 22 | ] 23 | }, 24 | "dependencies": { 25 | "@supabase/supabase-js": "^2.39.7", 26 | "@vercel/analytics": "^1.2.2", 27 | "@vercel/speed-insights": "^1.0.10", 28 | "class-variance-authority": "^0.7.0", 29 | "clsx": "^2.1.0", 30 | "lint-staged": "^15.2.2", 31 | "lucide-react": "^0.344.0", 32 | "next": "14.1.0", 33 | "react": "^18.2.0", 34 | "react-dom": "^18.2.0", 35 | "tailwind-merge": "^2.2.1", 36 | "tailwindcss-animate": "^1.0.7", 37 | "zod": "^3.22.4" 38 | }, 39 | "devDependencies": { 40 | "@playwright/test": "^1.39.0", 41 | "@tailwindcss/typography": "^0.5.10", 42 | "@testing-library/jest-dom": "^6.1.4", 43 | "@testing-library/react": "^14.1.0", 44 | "@testing-library/user-event": "^14.5.1", 45 | "@types/jest": "^29.5.8", 46 | "@types/node": "^20.11.20", 47 | "@types/react": "^18.2.60", 48 | "@types/react-dom": "^18.2.19", 49 | "autoprefixer": "^10.4.17", 50 | "eslint": "^8.57.0", 51 | "eslint-config-next": "14.1.0", 52 | "husky": "^9.0.11", 53 | "jest": "^29.7.0", 54 | "jest-environment-jsdom": "^29.7.0", 55 | "postcss": "^8.4.35", 56 | "prettier": "^3.2.5", 57 | "prettier-plugin-tailwindcss": "^0.5.11", 58 | "tailwindcss": "^3.4.1", 59 | "ts-jest": "^29.1.1", 60 | "ts-node": "^10.9.1", 61 | "typescript": "^5.3.3" 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /playwright.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig, devices } from "@playwright/test"; 2 | 3 | export default defineConfig({ 4 | timeout: 10 * 60 * 1000, 5 | testDir: "./e2e", 6 | use: { 7 | headless: true, 8 | screenshot: "only-on-failure", 9 | video: "retain-on-failure", 10 | baseURL: "http://localhost:3000", 11 | trace: "on-first-retry", 12 | actionTimeout: 20 * 1000, 13 | navigationTimeout: 50 * 1000, 14 | }, 15 | 16 | projects: [ 17 | { 18 | name: "chromium", 19 | use: { ...devices["Desktop Chrome"] }, 20 | }, 21 | 22 | { 23 | name: "firefox", 24 | use: { ...devices["Desktop Firefox"] }, 25 | }, 26 | 27 | { 28 | name: "webkit", 29 | use: { ...devices["Desktop Safari"] }, 30 | }, 31 | { 32 | name: "Microsoft Edge", 33 | use: { ...devices["Desktop Edge"], channel: "msedge" }, 34 | }, 35 | ], 36 | 37 | reporter: [ 38 | ["dot"], 39 | [ 40 | "html", 41 | { 42 | open: "always", 43 | }, 44 | ], 45 | ], 46 | }); 47 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | }; 7 | -------------------------------------------------------------------------------- /public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tailwind.config.ts: -------------------------------------------------------------------------------- 1 | import type { Config } from "tailwindcss"; 2 | 3 | const config = { 4 | darkMode: ["class"], 5 | content: [ 6 | "./pages/**/*.{ts,tsx}", 7 | "./components/**/*.{ts,tsx}", 8 | "./app/**/*.{ts,tsx}", 9 | "./src/**/*.{ts,tsx}", 10 | ], 11 | prefix: "", 12 | theme: { 13 | container: { 14 | center: true, 15 | padding: "2rem", 16 | screens: { 17 | "2xl": "1400px", 18 | }, 19 | }, 20 | extend: { 21 | colors: { 22 | border: "hsl(var(--border))", 23 | input: "hsl(var(--input))", 24 | ring: "hsl(var(--ring))", 25 | background: "hsl(var(--background))", 26 | foreground: "hsl(var(--foreground))", 27 | primary: { 28 | DEFAULT: "hsl(var(--primary))", 29 | foreground: "hsl(var(--primary-foreground))", 30 | }, 31 | secondary: { 32 | DEFAULT: "hsl(var(--secondary))", 33 | foreground: "hsl(var(--secondary-foreground))", 34 | }, 35 | destructive: { 36 | DEFAULT: "hsl(var(--destructive))", 37 | foreground: "hsl(var(--destructive-foreground))", 38 | }, 39 | muted: { 40 | DEFAULT: "hsl(var(--muted))", 41 | foreground: "hsl(var(--muted-foreground))", 42 | }, 43 | accent: { 44 | DEFAULT: "hsl(var(--accent))", 45 | foreground: "hsl(var(--accent-foreground))", 46 | }, 47 | popover: { 48 | DEFAULT: "hsl(var(--popover))", 49 | foreground: "hsl(var(--popover-foreground))", 50 | }, 51 | card: { 52 | DEFAULT: "hsl(var(--card))", 53 | foreground: "hsl(var(--card-foreground))", 54 | }, 55 | }, 56 | borderRadius: { 57 | lg: "var(--radius)", 58 | md: "calc(var(--radius) - 2px)", 59 | sm: "calc(var(--radius) - 4px)", 60 | }, 61 | keyframes: { 62 | "accordion-down": { 63 | from: { height: "0" }, 64 | to: { height: "var(--radix-accordion-content-height)" }, 65 | }, 66 | "accordion-up": { 67 | from: { height: "var(--radix-accordion-content-height)" }, 68 | to: { height: "0" }, 69 | }, 70 | }, 71 | animation: { 72 | "accordion-down": "accordion-down 0.2s ease-out", 73 | "accordion-up": "accordion-up 0.2s ease-out", 74 | }, 75 | }, 76 | }, 77 | plugins: [require("tailwindcss-animate")], 78 | } satisfies Config; 79 | 80 | export default config; 81 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | --------------------------------------------------------------------------------