DEVELOPMENT.md

Development

Table of Contents

• Development
  • Table of Contents
  • Prerequisites
  • Getting Started
  • Configuration
    • Client Env Variables
    • Server Env Variables
  • Installing the dependencies
  • Running the project locally
  • Building the project
  • Deploying the project
  • More DX scripts
    • Prettier
    • Eslint
    • Check Types
    • Check unused dependencies, exports & types
    • Stylelint
    • Markdown
    • Cspell
    • PNPM Dedupe

Prerequisites

Before you get started, you will need to have the following tools installed on your machine:

• Git (recommended for version control)
• Node.js (see .nvmrc for the version)
• pnpm (latest version)

This repository includes a list of suggested VS Code extensions. It's a good idea to use VS Code and accept its suggestion to install them, as they'll help with development.

Getting Started

Configuration

The project uses environmental variables for configuration. Create a .env file in the root directory with the following key-value pairs:

Client Env Variables

-NEXT_PUBLIC_SITE_URL(required: The URL of the frontend App of the project

-NEXT_PUBLIC_SENTRY_DSN(optional: The URL of the Sentry service used for error logging and reporting.

Server Env Variables

-SENTRY_AUTH_TOKEN(optional: The authentication token for the Sentry service.

Note: There is already**.env.example** which can be used to setup the env quickly by removing the .example in their filename.

Adding a new environmental variable requires a zod schema update in the env folder and a new entry in the schema.js file in the serverSchema variable or clientSchema variable.

Installing the dependencies

After you have set the environmental variables in the .env file, you can run the project locally by

git clone https://github.com/timelessco/next-ts-app-template

cd next-ts-app-template

pnpm install

This will download and install all the required dependencies for the project.

Running the project locally

pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying src/pages/index.js. The page auto-updates as you edit the file.

Building the project

To build the project to a production environment, you can use the

pnpm build

to build the production-ready version of the project. This will create a .next directory with the compiled code and static assets.

Run the above built application locally using

pnpm start

Deploying the project

Guide on how to deploy Next.js to various hosting providers.

More DX scripts

Check for all the below errors in one command using Turbo Repo

pnpm lint

AutoFix all the linting errors in one command using Turbo Repo

pnpm fix

Prettier

Prettier is used to format code. It should be applied automatically when you save files in VS Code or make a Git commit.

Check the formatting errors

pnpm lint:prettier

AutoFix the formatting errors

pnpm fix:prettier

This package includes several forms of linting to enforce consistent code quality and styling. Each should be shown in VS Code, and can be run manually on the command-line.

Eslint

ESLint: Extends recommended rules for the Next.js project that lints JavaScript/TypeScript source files and other files

Check for the linting errors

pnpm lint:eslint

AutoFix the linting errors

pnpm fix:eslint

Check Types

TypeScript: Type checks all the files

Check for type errors

pnpm lint:types

Check unused dependencies, exports & types

knip: Checks all unused dependencies, exports & types

Check the spelling errors

pnpm lint:knip

Stylelint

Stylelint: Checks all css files

Check the css linting errors

pnpm lint:css

AutoFix the css linting errors

pnpm fix:css

Markdown

Markdownlint: Checks all Markdown files

Check the markdown linting errors

pnpm lint:md

AutoFix the markdown linting errors

pnpm fix:md

Cspell

cspell: Spell checks across all source files

Check the spelling errors

pnpm lint:spelling

AutoFix the spelling errors

pnpm fix:spelling

PNPM Dedupe

pnpm dedupe --check: Lints the pnpm-lock.yml file

Check for unnecessarily duplicated packages

• pnpm check:packages