Skip to main content

Development

This guide covers the development workflow for the Infowebplus project.

Available Scripts​

# Development
npm run dev          # Start Next.js dev server
npm run sanity       # Start Sanity Studio

# Build
npm run build        # Build for production
npm run sanity:build # Build Sanity Studio

# Lint
npm run lint         # Run ESLint

Development Server​

Start the development server:

npm run dev

The application will be available at:

Project Structure​

infowebplus/
├── src/
│   ├── app/              # Next.js App Router pages
│   │   ├── [locale]/     # Localized routes
│   │   └── api/          # API routes
│   ├── components/       # React components
│   ├── i18n/            # i18n configuration
│   └── lib/             # Utilities and helpers
├── messages/            # Translation files
├── studio/              # Sanity Studio
└── public/              # Static assets

Code Style​

The project uses:

  • TypeScript for type safety
  • ESLint for code linting
  • Prettier (recommended) for code formatting

Hot Reload​

Both Next.js and Sanity Studio support hot module replacement (HMR):

  • Changes to React components update instantly
  • Changes to pages trigger automatic refresh
  • Sanity Studio updates in real-time

Debugging​

Next.js Debugging​

Use browser DevTools or VS Code debugger with the following configuration:

{
  "type": "node",
  "request": "launch",
  "name": "Next.js: debug server-side",
  "runtimeExecutable": "npm",
  "runtimeArgs": ["run", "dev"]
}

Sanity Studio Debugging​

Sanity Studio runs in development mode with full error messages and stack traces.

Testing​

Currently, the project doesn't include automated tests. Consider adding:

  • Unit tests with Jest/Vitest
  • Component tests with React Testing Library
  • E2E tests with Playwright or Cypress

Next Steps​