Welcome to the Next.js Template project! This template is designed to be the ideal starting point for your modern NextJS applications, streamlining the development process right from the get-go.
Getting started with this Next.js template is straightforward. Follow these steps to create your new project using this template:
-
Create a new Next.js app using this template:
Run the following command in your terminal to create a new project with this template:
npx create-next-app@latest your-project-name --example https://github.com/zerodays/nextjs-template
-
Navigate into your new project folder:
cd your-project-name
-
Install dependencies:
pnpm i
-
Run the development server:
pnpm dev
- Next.js 14 with App router
- TailwindCSS for styling
- Also exposes styles as global CSS variables and theme object
- tailwindcss-animate plugin for quick animations
- tailwindcss/typography plugin for typography (prose - useful for rendering markdown)
- tailwind-scrollbar plugin for customizing scrollbars
- Prettier
- Organizing Imports enabled
- Tailwind class sorting enabled
- ESLint for finding problems with following rule sets:
- Husky for Git hooks with:
- commitlint for conventional commits
- lint-staged
- .vscode settings for consistent development environment
- Prettier format + fix on save
- Prevent auto imports from
@radix-ui
andtailwindcss
- Prioritize non-relative imports (e.g.
@/components
) - Enable Tailwind highlighting and typesafety inside specific variables and functions (e.g.
cva()
)
- next-international for internationalization
- server side with
await getScopedI18n('fileName')
- client side with
useScopedI18n('fileName')
- server side with
- t3-oss/env-nextjs for typesafe environment variables
- Infisical for injecting env vars
- Sentry for error/event tracking
- shadcn/ui setup for UI components
- react-hook-form for forms
- zod for form validation
- Zodios for external API calls with validation
- Github Actions for lint, typecheck, localizations checks and tests.
- openapi-zod-client for generating API clients
- We include a handlebars template for generating the zodios client from the openapi spec. It can be used with
pnpm gen-api
command - Adjust the
gen-api
command in package.json to fetch the OpenAPIyaml
file from the correct URL
- We include a handlebars template for generating the zodios client from the openapi spec. It can be used with
- Utility hooks for common tasks
- Custom
useScrollCallback
for efficient scroll event handling
- Custom
Here's an overview of the folder structure provided in this template:
.
├── .github # GitHub Actions configurations for CI/CD + PR template
├── .husky # Husky configurations for managing Git hooks
├── .vscode # VSCode settings to maintain consistency in development environments
├── docs # Extended documentation and guides
├── public # Stores static files like images and fonts
├── scripts # Custom scripts for development tasks like testing and linting
├── src # Source files for the Next.js application
│ ├── app # Core application files including pages and API routes
│ │ ├── [locale] # Actual localized routes/pages of the application
│ │ ├── globals.css # Global CSS styles
│ │ └── layout.tsx # Main layout component
│ ├── components # Reusable UI components
│ │ ├── common # Common components like providers, headers, footers, etc.
│ │ ├── examples # Example components to demonstrate usage
│ │ └── ui # UI specific components like buttons, modals, etc.
│ ├── i18n # Internationalization configurations
│ │ ├── en # English language translations
│ │ ├── sl # Slovenian language translations
│ │ └── ...setup # i18n setup files
│ ├── lib # Library code and utility functions
│ │ ├── hooks # Custom hooks for common tasks
│ │ └── utils.ts # Utility functions for common tasks
│ ├── env.ts # Environment-specific configurations
│ └── middleware.ts # Custom middleware functions
└── README.md # The main README file for the project
Customize and configure your Next.js project to match your preferences and project requirements. Below is a short guide on how to tweak various aspects of the setup.
-
Prettier: Modify the
.prettierrc.js
to change code formatting rules. You can adjust settings like print width, tab width, and more to fit your coding style. -
ESLint: To change linting rules, edit the
.eslintrc.json
. You can add or remove specific rules or plugins according to your project needs.
- Adding New Languages: To support a new language, add a corresponding folder in
src/i18n
, then update theLOCALES
variable insrc/i18n/i18n.ts
. Include the new language in bothclient.tsx
andserver.tsx
configurations to ensure proper loading.
-
TailwindCSS: Customize the
tailwind.config.ts
to alter your design theme, such as changing the color palette or configuring responsiveness. -
Global Styles: Modify
src/app/globals.css
to adjust global styles or add new CSS variables. See theming documentation for more information.
-
Opting Out of Infisical: Remove
.infisical.json
and create.env.local
for local environment variable management. Change the dev script inpackage.json
from"dev": "infisical run -- next dev"
to"dev": "next dev"
. -
Type-Safe Environment Variables: Edit
src/env.ts
to define and manage your environment variables usingt3-oss/env-nextjs
for type safety.
- Setup: Ensure environment variables
NEXT_PUBLIC_SENTRY_DSN
,NEXT_PUBLIC_SENTRY_TRACE_SAMPLE_RATE
, andSENTRY_AUTH_TOKEN
are set up in your environment configuration file (like.env.local
if you are not using Infisical) for Sentry to function correctly.
- shadcn/ui: Modify the
components.json
to configure or extend the UI components provided byshadcn/ui
. Before starting a new project, check for possible component updates. To install new components and get more information, visit the shadcn/ui documentation. - Do not be afraid to modify the UI components to fit your project's needs. That's the whole point of using copy-paste components!