Extras

Additional resources and tips to enhance your development experience.

Useful Links

Documentation

Tools

Development Tips

VS Code Extensions

Recommended extensions:

ES7+ React/Redux/React-Native snippets: Code snippets
Tailwind CSS IntelliSense: Autocomplete for Tailwind
Prisma: Prisma schema support
ESLint: Code linting
Prettier: Code formatting
GitLens: Git integration

Code Snippets

Add to .vscode/settings.json:

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "typescript.preferences.importModuleSpecifier": "relative"
}

Git Hooks

Use Husky for Git hooks:

pnpm add -D husky lint-staged
npx husky init

.husky/pre-commit:

#!/bin/sh
pnpm lint-staged

package.json:

{
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": ["eslint --fix", "prettier --write"],
    "*.{json,md,mdx}": ["prettier --write"]
  }
}

Performance Optimization

Bundle Analysis

Analyze your bundle size:

pnpm add -D @next/bundle-analyzer

next.config.ts:

import bundleAnalyzer from '@next/bundle-analyzer';

const withBundleAnalyzer = bundleAnalyzer({
  enabled: process.env.ANALYZE === 'true',
});

export default withBundleAnalyzer(nextConfig);

Run analysis:

ANALYZE=true pnpm run build

Lazy Loading

import dynamic from 'next/dynamic';

const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
  loading: () => <p>Loading...</p>,
  ssr: false,
});

Image Optimization

import Image from 'next/image';

<Image
  src="/image.jpg"
  alt="Description"
  width={500}
  height={300}
  quality={85}
  placeholder="blur"
  blurDataURL="data:image/..."
/>

Testing

Vitest Setup

pnpm add -D vitest @vitejs/plugin-react

vitest.config.ts:

import { defineConfig } from 'vitest/config';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  test: {
    environment: 'jsdom',
  },
});

Example Test

import { describe, it, expect } from 'vitest';
import { render, screen } from '@testing-library/react';
import { Button } from '@/components/ui/button';

describe('Button', () => {
  it('renders correctly', () => {
    render(<Button>Click me</Button>);
    expect(screen.getByText('Click me')).toBeInTheDocument();
  });
});

Internationalization (i18n)

The starter already includes i18n with next-intl.

Add New Locale

Create message file:

// i18n/messages/es.json
{
  "common": {
    "welcome": "Bienvenido"
  }
}

Update routing:

// i18n/routing.ts
export const routing = {
  locales: ['en', 'zh', 'es'],
  defaultLocale: 'en',
};

Use Translations

import { useTranslations } from 'next-intl';

export function Component() {
  const t = useTranslations('common');

  return <h1>{t('welcome')}</h1>;
}

API Documentation

Use OpenAPI/Swagger for API documentation:

pnpm add swagger-ui-react

Create API docs page:

// app/[locale]/api-docs/page.tsx
import SwaggerUI from 'swagger-ui-react';
import 'swagger-ui-react/swagger-ui.css';

export default function ApiDocs() {
  return <SwaggerUI url="/api/openapi.json" />;
}

Database GUI

Prisma Studio

pnpm prisma studio

Opens at http://localhost:5555

Alternative Tools

Debugging

Next.js Debug Mode

// .vscode/launch.json
{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Next.js: debug server-side",
      "type": "node-terminal",
      "request": "launch",
      "command": "pnpm run dev"
    },
    {
      "name": "Next.js: debug client-side",
      "type": "chrome",
      "request": "launch",
      "url": "http://localhost:3000"
    }
  ]
}

React DevTools

Install browser extension:

Code Quality

Type Coverage

Check TypeScript coverage:

pnpm add -D type-coverage

{
  "scripts": {
    "type-coverage": "type-coverage"
  }
}

Code Complexity

Use ESLint complexity rules:

{
  "rules": {
    "complexity": ["error", 10]
  }
}

Useful Scripts

Add to package.json:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "format": "prettier --write .",
    "type-check": "tsc --noEmit",
    "db:push": "prisma db push",
    "db:studio": "prisma studio",
    "db:migrate": "prisma migrate dev",
    "db:seed": "tsx prisma/seed.ts",
    "clean": "rm -rf .next node_modules",
    "reinstall": "pnpm run clean && pnpm install"
  }
}

Environment Setup

Local HTTPS

For testing OAuth locally:

pnpm add -D local-ssl-proxy

{
  "scripts": {
    "dev:https": "local-ssl-proxy --source 3001 --target 3000"
  }
}

Multiple Environments

.env.local          # Local development
.env.development    # Development
.env.staging        # Staging
.env.production     # Production

Resources

Learning

Community

Blogs

Support

If you need help:

Check the documentation
Search GitHub Issues
Ask in Discussions
Contact support@yourapp.com

Contributing

We welcome contributions! Please see our Contributing Guide.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Extras

On this page