@devkitlab/create-nextjs 0.2.9

package/README.md

@@ -0,0 +1,69 @@
+# @devkitlab/create-nextjs
+
+Scaffold a DevkitLab Next.js starter with TypeScript, Tailwind CSS, and a ready-to-extend project structure.
+
+## Why Use It
+
+- Start faster with an opinionated Next.js setup
+- Skip repetitive project bootstrapping
+- Get a clean base for content-driven or product-focused apps
+- Use a starter that already includes common developer tooling
+
+## What You Get
+
+- Next.js App Router
+- TypeScript
+- Tailwind CSS
+- Sanity starter wiring
+- ESLint and Prettier
+- Husky and lint-staged
+- Reusable starter structure for components and app sections
+
+## Installation
+
+Create a new app with:
+
+```bash
+npx @devkitlab/create-nextjs@latest my-app
+```
+
+Then move into the project and install dependencies:
+
+```bash
+cd my-app
+npm install
+npm run dev
+```
+
+You can also use `pnpm` or `yarn` instead of `npm`.
+
+## Getting Started
+
+After installation:
+
+1. Create a `.env.local` file if you need environment variables.
+2. Start the development server with `npm run dev`.
+3. Open `http://localhost:3000`.
+4. Begin editing the generated app.
+
+## Generated Project Highlights
+
+- App code lives in `app/`
+- Shared UI and utilities live in `src/`
+- Static assets live in `public/`
+- Tailwind is preconfigured
+- Linting and formatting are already set up
+
+## Who It’s For
+
+This starter is useful if you want:
+
+- a modern Next.js + TypeScript base
+- Tailwind configured out of the box
+- a starter that can grow into a CMS-backed app
+- a reusable foundation for client projects or internal tools
+
+## Package
+
+- npm: `@devkitlab/create-nextjs`
+- repository: `shahadat-robin/devkitlab-nextjs`

package/bin/create-nextjs.mjs

@@ -0,0 +1,100 @@
+#!/usr/bin/env node
+
+import { cp, mkdir, readFile, readdir, rename, writeFile } from 'node:fs/promises';
+import path from 'node:path';
+import process from 'node:process';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const templateDir = path.resolve(__dirname, '..', 'template');
+
+const rawProjectName = process.argv[2] || 'my-devkitlab-app';
+const projectName = rawProjectName.trim();
+
+if (!projectName) {
+  console.error('Project name cannot be empty.');
+  process.exit(1);
+}
+
+const targetDir = path.resolve(process.cwd(), projectName);
+
+try {
+  await mkdir(targetDir, { recursive: true });
+  const existingEntries = await readdir(targetDir);
+
+  if (existingEntries.length > 0) {
+    console.error(`Target directory is not empty: ${targetDir}`);
+    process.exit(1);
+  }
+
+  await cp(templateDir, targetDir, {
+    recursive: true,
+    filter: source => {
+      const relativePath = path.relative(templateDir, source);
+
+      return relativePath !== '.DS_Store';
+    },
+  });
+
+  await renameIfExists(path.join(targetDir, 'gitignore'), path.join(targetDir, '.gitignore'));
+  await renameIfExists(path.join(targetDir, 'env.example'), path.join(targetDir, '.env.example'));
+
+  const packageJsonPath = path.join(targetDir, 'package.json');
+  const packageJson = JSON.parse(await readFile(packageJsonPath, 'utf8'));
+
+  packageJson.name = toPackageName(projectName);
+
+  await writeFile(packageJsonPath, `${JSON.stringify(packageJson, null, 2)}\n`);
+
+  const packageManager = detectPackageManager();
+
+  console.log('');
+  console.log('DevkitLab Next.js starter created successfully.');
+  console.log('');
+  console.log('Next steps:');
+  console.log(`  cd ${projectName}`);
+  console.log(`  ${packageManager} install`);
+  console.log(`  ${packageManager} run dev`);
+  console.log('');
+} catch (error) {
+  console.error('Failed to create project.');
+  console.error(error instanceof Error ? error.message : error);
+  process.exit(1);
+}
+
+function toPackageName(value) {
+  return (
+    value
+      .toLowerCase()
+      .trim()
+      .replace(/[^a-z0-9-_]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'my-devkitlab-app'
+  );
+}
+
+function detectPackageManager() {
+  const userAgent = process.env.npm_config_user_agent || '';
+
+  if (userAgent.startsWith('yarn')) {
+    return 'yarn';
+  }
+
+  if (userAgent.startsWith('pnpm')) {
+    return 'pnpm';
+  }
+
+  return 'npm';
+}
+
+async function renameIfExists(fromPath, toPath) {
+  try {
+    await rename(fromPath, toPath);
+  } catch (error) {
+    if (error && typeof error === 'object' && 'code' in error && error.code === 'ENOENT') {
+      return;
+    }
+
+    throw error;
+  }
+}

package/package.json

@@ -0,0 +1,35 @@
+{
+  "name": "@devkitlab/create-nextjs",
+  "version": "0.2.9",
+  "description": "Create a DevkitLab Next.js starter app with TypeScript and Tailwind CSS.",
+  "type": "module",
+  "bin": {
+    "create-nextjs": "./bin/create-nextjs.mjs"
+  },
+  "files": [
+    "bin",
+    "template"
+  ],
+  "keywords": [
+    "create-next-app",
+    "nextjs",
+    "typescript",
+    "tailwindcss",
+    "starter",
+    "scaffold"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/shahadat-robin/devkitlab-nextjs.git"
+  },
+  "bugs": {
+    "url": "https://github.com/shahadat-robin/devkitlab-nextjs/issues"
+  },
+  "license": "MIT",
+  "engines": {
+    "node": ">=18.17.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/template/.eslintrc.json

@@ -0,0 +1,10 @@
+{
+  "plugins": ["@typescript-eslint"],
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "no-unused-vars": "error",
+    "no-console": "warn",
+    "react/jsx-uses-react": "warn",
+    "@typescript-eslint/no-explicit-any": "error"
+  }
+}

package/template/.husky/pre-commit

@@ -0,0 +1,5 @@
+#!/usr/bin/env sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx lint-staged
+yarn lint

package/template/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 100,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "bracketSpacing": true,
+  "bracketSameLine": false,
+  "arrowParens": "always"
+}

package/template/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "editor.fontLigatures": true,
+  "editor.cursorBlinking": "expand",
+  "editor.cursorSmoothCaretAnimation": "explicit",
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.codeActionsOnSave": {
+    "source.organizeImports": "always"
+  }
+}

package/template/README.md

@@ -0,0 +1,70 @@
+# NextJS-Starter
+
+This is a [Next.js](https://nextjs.org/) project starter kit bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Features
+
+- **Next.js 14:** The latest version of Next.js with all its powerful features.
+- **TypeScript:** TypeScript support for type safety and better developer experience.
+- **Tailwind CSS:** Utility-first CSS framework for rapid UI development.
+- **Theaming:** Dark and Light theme enhanched.
+- **ESLint and Prettier:** Code quality tools to maintain a consistent codebase.
+- **Husky:** Automatically lint commit messages and code upon committing.
+- **Environment Variables:** Easy management of environment variables.
+- **Customizable Layout:** Flexible layouting components.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Getting Start
+
+### Prerequisites
+
+- Node.js (>= 18.17)
+- yarn
+
+### Installation
+
+```bash
+
+# Clone the repository:
+git clone https://github.com/yourusername/NextJS-Starter.git
+
+# Go to project directory
+cd NextJS-Starter
+
+# Install dependencies:
+yarn
+
+# Start the development server:
+yarn dev
+# or
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) into your browser to see the result.
+
+## Project Structure
+
+```plaintext
+NextJS-Starter/
+├── public/                # Static assets
+│   app/                   # Next.js pages
+│   ├── _layout/           # Layout components
+│   └── (home)/            # Home page grouping
+├── src/
+│   ├── components/        # Reusable components
+│   ├── utils/             # Utility functions
+│   ├── hooks/             # Custom React hooks
+│   └── services/          # API services
+├── .eslintrc.json         # ESLint configuration
+├── .prettierrc            # Prettier configuration
+├── next.config.js         # Next.js configuration
+├── tsconfig.json          # TypeScript configuration
+└── package.json           # Project metadata and scripts
+```
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.

package/template/app/(home)/page.tsx

@@ -0,0 +1,14 @@
+import type { NextPage } from 'next';
+import AnotherSection from './sub-components/another-section';
+import HeroSection from './sub-components/hero-section';
+
+const HomePage: NextPage = () => (
+  <>
+    <HeroSection />
+    <AnotherSection />
+    <AnotherSection />
+    <AnotherSection />
+  </>
+);
+
+export default HomePage;

package/template/app/(home)/sub-components/another-section.tsx

@@ -0,0 +1,12 @@
+import Container from '@/components/container';
+import Typography from '@/components/typography';
+
+export default function AnotherSection() {
+  return (
+    <section className="min-h-screen shadow section-padding">
+      <Container className="text-center">
+        <Typography variant="h2">This is another section</Typography>
+      </Container>
+    </section>
+  );
+}

package/template/app/(home)/sub-components/hero-section.tsx

@@ -0,0 +1,29 @@
+import Button from '@/components/button';
+import Container from '@/components/container';
+import IconStore from '@/components/icon-store';
+import Typography from '@/components/typography';
+import { cn } from '@/utils/class-merge';
+
+export default function HeroSection() {
+  return (
+    <section className={cn(`flex section-padding min-h-screen`)}>
+      <Container className="flex items-center justify-center">
+        <div className="text-center space-y-5">
+          <Typography variant="h1">This is Hero Section</Typography>
+          <Typography className="lg:w-3/5 mx-auto">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius fuga culpa ea velit
+            tempore libero ullam natus ipsa architecto iusto porro inventore unde deleniti quibusdam
+            accusantium, ad error, beatae adipisci?
+          </Typography>
+
+          <Button
+            variant="secondary"
+            className="border border-primary text-primary dark:text-white"
+          >
+            Explore <IconStore name="arrow-right-long" className="text-xl" />
+          </Button>
+        </div>
+      </Container>
+    </section>
+  );
+}

package/template/app/_layout/footer.tsx

@@ -0,0 +1,12 @@
+import Container from '@/components/container';
+import Typography from '@/components/typography';
+
+export default function Footer() {
+  return (
+    <footer className="bg-primary dark:bg-dark-light">
+      <Container className="py-5 text-center">
+        <Typography>This is Footer</Typography>
+      </Container>
+    </footer>
+  );
+}

package/template/app/_layout/header.tsx

@@ -0,0 +1,41 @@
+'use client';
+
+import Container from '@/components/container';
+import IconStore from '@/components/icon-store';
+import { useTheme } from 'next-themes';
+import Image from 'next/image';
+
+export default function AppHeader() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <header className="py-5 sticky top-0 bg-primary dark:bg-dark-light z-50">
+      <Container className="flex items-center justify-between">
+        <Image
+          src="/next.svg"
+          alt="Brand logo"
+          width={100}
+          height={50}
+          className="h-auto w-[6.25rem] cursor-pointer"
+          priority
+        />
+
+        <label htmlFor="theme-toggle" className="flex items-center cursor-pointer">
+          <div className="relative min-h-[30px] w-[55px] rounded-full bg-white">
+            <input
+              type="checkbox"
+              name="theme-mode"
+              id="theme-toggle"
+              className="checkbox hidden"
+              onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
+            />
+            <div className="absolute right-1 top-1/2 -translate-y-1/2 bg-dark-light p-1 rounded-full transition-transform duration-200 dark:transform dark:-translate-x-full">
+              <IconStore name="moon" className="hidden dark:block text-white" />
+              <IconStore name="sun" className="block dark:hidden text-yellow-500" />
+            </div>
+          </div>
+        </label>
+      </Container>
+    </header>
+  );
+}

package/template/app/layout.tsx

@@ -0,0 +1,31 @@
+import type { Metadata } from 'next';
+import type { PropsWithChildren } from 'react';
+import Footer from './_layout/footer';
+import AppHeader from './_layout/header';
+import RootProvider from './provider';
+import './styles.css';
+
+// const inter = Inter({
+//   subsets: ['latin'],
+//   style: 'normal',
+//   weight: ['400', '500', '600', '700'],
+// });
+
+export const metadata: Metadata = {
+  title: 'NextJS Project Starter',
+  description: 'Generated by create-next-app and tailwind',
+};
+
+export default function RootLayout({ children }: Readonly<PropsWithChildren>) {
+  return (
+    <html lang="en" suppressHydrationWarning>
+      <body cz-shortcut-listen="true">
+        <RootProvider>
+          <AppHeader />
+          {children}
+          <Footer />
+        </RootProvider>
+      </body>
+    </html>
+  );
+}

package/template/app/provider.tsx

@@ -0,0 +1,15 @@
+'use client';
+
+import ReactLenis from 'lenis/react';
+import { ThemeProvider } from 'next-themes';
+import type { FC, PropsWithChildren } from 'react';
+
+const RootProvider: FC<Readonly<PropsWithChildren>> = ({ children }) => (
+  <ReactLenis root>
+    <ThemeProvider attribute="class" defaultTheme="light">
+      {children}
+    </ThemeProvider>
+  </ReactLenis>
+);
+
+export default RootProvider;

package/template/app/styles.css

@@ -0,0 +1,72 @@
+@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Roboto+Slab:wght@400..700&display=swap');
+
+@tailwind base;
+@layer base {
+  body {
+    @apply bg-white-deep dark:bg-dark font-body;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply font-semibold font-heading;
+  }
+
+  h1 {
+    font-size: clamp(2rem, 10vw, 3rem); /* 32px → 48px */
+    line-height: clamp(2.5rem, 11vw, 4rem); /* Fluid height */
+  }
+
+  h2 {
+    font-size: clamp(1.5rem, 8vw, 2rem); /* 24px → 32px */
+    line-height: clamp(2rem, 9vw, 3rem);
+  }
+
+  h3 {
+    font-size: clamp(1.25rem, 6vw, 1.5rem); /* 20px → 24px */
+    line-height: clamp(1.75rem, 7vw, 2.5rem);
+  }
+
+  h4 {
+    font-size: clamp(1.125rem, 4vw, 1.25rem); /* 18px → 20px */
+    line-height: clamp(1.5rem, 5vw, 2rem);
+  }
+
+  h5 {
+    font-size: clamp(1rem, 3vw, 1.125rem); /* 16px → 18px */
+    line-height: clamp(1.25rem, 4vw, 1.75rem);
+  }
+
+  h6 {
+    font-size: clamp(0.875rem, 2vw, 1rem); /* 14px → 16px */
+    line-height: clamp(1.125rem, 3vw, 1.5rem);
+  }
+
+  p,
+  a,
+  ol,
+  ul,
+  li,
+  label,
+  div,
+  span {
+    font-size: clamp(0.875rem, 2vw, 1rem);
+    line-height: clamp(1.125rem, 3vw, 1.5rem);
+  }
+
+  .container {
+    @apply px-4;
+  }
+}
+
+@tailwind components;
+
+@tailwind utilities;
+@layer utilities {
+  .section-padding {
+    padding: min(10vw, 5rem) 0;
+  }
+}

package/template/next.config.ts

@@ -0,0 +1,9 @@
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  images: {
+    remotePatterns: [{ hostname: '*' }],
+  },
+};
+
+export default nextConfig;

package/template/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "nextjs-starter-boilerplate",
+  "version": "0.0.1",
+  "private": true,
+  "type": "module",
+  "engines": {
+    "node": ">=18.17.0",
+    "yarn": ">=1.22.0"
+  },
+  "scripts": {
+    "preinstall": "npx only-allow yarn",
+    "dev": "next dev --turbopack",
+    "build": "next build",
+    "start": "next start",
+    "format": "prettier . --write",
+    "lint": "next lint --max-warnings=0",
+    "prepare": "husky"
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,md,html,css,json}": "prettier --write"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "lenis": "^1.1.1",
+    "next": "^15.3.4",
+    "next-themes": "^0.4.4",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "sharp": "^0.33.5",
+    "tailwind-merge": "^2.3.0",
+    "tw-elements-react": "^1.0.0-alpha2"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
+    "eslint": "^8",
+    "eslint-config-next": "15.1.7",
+    "eslint-config-prettier": "^9.1.0",
+    "husky": "^9.0.11",
+    "lint-staged": "^15.2.2",
+    "only-allow": "^1.2.1",
+    "postcss": "^8",
+    "prettier": "3.2.5",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5",
+    "typescript-eslint": "^7.8.0"
+  },
+  "packageManager": "yarn@1.22.22"
+}

package/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

package/template/public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

package/template/public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

package/template/src/components/button/index.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import { cn } from '@/utils/class-merge';
+import { TERipple } from 'tw-elements-react';
+import type { IButtonProps } from './interface';
+
+export default function Button({
+  children,
+  className,
+  size = 'md',
+  variant = 'primary',
+  disabled = false,
+  ...rest
+}: IButtonProps) {
+  return (
+    <TERipple>
+      <button
+        className={cn(
+          {
+            'py-3 px-5 text-lg': size === 'lg',
+            'py-2 px-4': size === 'md',
+            'py-1.5 px-3 text-sm': size === 'sm',
+          },
+          {
+            'bg-primary': variant === 'primary',
+            'bg-primary-light': variant === 'secondary',
+            'bg-transparent border': variant === 'transparent',
+          },
+          disabled ? 'disabled:cursor-not-allowed' : 'hover:shadow-md',
+          'flex items-center gap-2 rounded transition-all dark:bg-primary',
+          className
+        )}
+        disabled={disabled}
+        {...rest}
+      >
+        {children}
+      </button>
+    </TERipple>
+  );
+}
+
+Button.displayName = 'Button';