Next.js Starter

Introductions

The Next.js Starter is a fully equipped template designed to accelerate the development of modern web applications. Pre-configured with components from this documentation, along with essential settings and tools, it enables developers to efficiently build high-quality applications. This starter kit provides a streamlined development experience with built-in optimizations, type safety, IDE configurations, and a brand-specific theme.

• Optimized for Performance: Leverage the full power of Next.js with server-side rendering and static site generation, ensuring your application is fast, scalable, and ready to handle any traffic right from the start.
• Error-Free Development: Built with TypeScript, the Next.js Starter ensures type safety, catching issues early and enhancing code quality, so you can develop with confidence.
• Seamless Developer Experience: Pre-configured IDE settings provide a smooth development process, offering code completion, linting, and debugging tools that help you work smarter and faster.
• Tailored Design, Out of the Box: With Tailwind CSS integrated, you can quickly create responsive, scalable designs that are perfectly aligned with your brand’s identity through easy theme customization.
• Customizable, Ready-to-Use Components: A library of accessible, unstyled components is included, allowing you to effortlessly customize and build a consistent, polished interface with Tailwind CSS.
• All-in-One Solution: From routing and data fetching to fully integrated components and styling, this starter kit offers everything you need to launch your project quickly and efficiently.

Architecture

Next.js

Next.js is a powerful React framework that provides server-side rendering, static site generation, and API routes out-of-the-box. It serves as the backbone of our application, managing routing, data fetching, and rendering components efficiently. With its built-in support for TypeScript, CSS-in-JS, and optimized performance, Next.js ensures a seamless development experience and high-performance applications.

React

React is the JavaScript library used for building user interfaces. It allows us to create reusable UI components, manage state effectively, and build complex UIs with ease. React's component-based architecture enables a modular approach to building applications, making it easier to develop, test, and maintain.

ShadCN

ShadCN's headless components serve as foundational building blocks, offering core functionality without enforcing specific styles, allowing developers complete freedom to customize them. These components, combined with Tailwind CSS, provide limitless flexibility, ensuring minimal maintenance and full control over design. ShadCN is built with a focus on accessibility, adhering to WAI-ARIA standards, and its modular, containerized architecture makes integrating other headless components or libraries, like those from Adobe or GitHub, seamless. Additionally, the option to self-host enhances security, and when paired with Next.js, performance remains optimized through prefetching, prerendering, and caching, ensuring an efficient and smooth user experience.

Tailwind CSS

Tailwind CSS is a utility-first CSS framework that we use across the design system to standardize and simplify styles. It enables the development of responsive layouts without relying on performance-heavy JavaScript. With its predefined classes and variable-based theming engine, developers can apply styles directly in the markup, promoting a streamlined and efficient workflow. Tailwind's utility classes provide precise control over design elements, ensuring that the UI is responsive, scalable, and easily customizable.

TypeScript

TypeScript is a statically-typed superset of JavaScript used throughout the design system to enhance code reliability and maintainability. It enables developers to catch errors at compile time rather than runtime, reducing potential bugs and improving overall code quality. With its strong type system and support for modern JavaScript features, TypeScript promotes a streamlined development workflow by providing better tooling, autocompletion, and refactoring capabilities. The use of TypeScript ensures that code is more predictable, scalable, and easier to maintain, making the development process more efficient and reducing long-term technical debt.

ZOD

ZOD is a TypeScript-first schema validation library integrated into the design system to ensure robust and safe data handling, particularly in forms. It allows developers to define and validate schemas with ease, ensuring that form inputs and other data conform to expected structures before processing. ZOD simplifies both client-side and server-side validation, reducing errors caused by invalid or unexpected data in forms. Its integration with TypeScript provides strong type inference, enhancing code safety and reliability. This approach ensures that forms and other data-driven components are handled consistently and maintainably across the system.

Additional information can be found on the (Core Technology Stack Page)[/docs/development/techstack]

Getting Started

pnpm install // Or package manager of choice

// /src/config/site.ts 
export const siteConfig: SiteConfig = {
  name: "NextJS Starter", // Site Title
  description:
    "A simplified NextJS 14+ starter template with all parts included.", // Meta description
  keywords: ["Next.js", "React", "Tailwind CSS"], // SEO Keywords Associated with the site
  url: {
    base: env.NEXT_PUBLIC_APP_URL, // Base URL for the Application
  },
  ogImage: `${env.NEXT_PUBLIC_APP_URL}/og.jpg`, // Open Graph/ Social Preview Image
}

@layer base {
  :root {
    --background: 203 0% 100%;
    --foreground: 203 0% 10%;
    --card: 203 0% 100%;
    --card-foreground: 203 0% 15%;
    --popover: 203 0% 100%;
    --popover-foreground: 203 95% 10%;
    --primary: 203 98.8% 32.4%;
    --primary-foreground: 0 0% 100%;
    --secondary: 203 10% 90%;
    --secondary-foreground: 0 0% 0%;
    --muted: 165 10% 95%;
    --muted-foreground: 203 0% 40%;
    --accent: 165 10% 90%;
    --accent-foreground: 203 0% 15%;
    --destructive: 0 50% 50%;
    --destructive-foreground: 203 0% 100%;
    --border: 203 20% 82%;
    --input: 203 20% 82%;
    --ring: 203 98.8% 32.4%;
    --radius: 10px;
    --chart-1: 255 55% 23%;
    --chart-2: 217 30% 90%;
    --chart-3: 30 80% 60%;
    --chart-4: 300 60% 70%;
    --chart-5: 180 50% 60%;
  }
  .dark {
    --background: 150 10% 5%;
    --foreground: 203 0% 90%;
    --card: 203 0% 0%;
    --card-foreground: 203 0% 90%;
    --popover: 203 10% 5%;
    --popover-foreground: 203 0% 90%;
    --primary: 203 98.8% 32.4%;
    --primary-foreground: 0 0% 100%;
    --secondary: 203 10% 10%;
    --secondary-foreground: 0 0% 100%;
    --muted: 165 10% 15%;
    --muted-foreground: 203 0% 60%;
    --accent: 165 10% 15%;
    --accent-foreground: 203 0% 90%;
    --destructive: 0 50% 30%;
    --destructive-foreground: 203 0% 90%;
    --border: 203 20% 18%;
    --input: 201 20% 18%;
    --ring: 203 98.8% 32.4%;
    --radius: 10px;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

// /package.json
"scripts": {
    "dev": "next dev --turbo", // Starts development server
    "build": "next build", // Builds application
    "preview": "next build && next start" // Previews the build output
  },

// /example.tsx
import { Button } from "@/components/ui/button"