Clean HTML | Next.js | Page 1

harsh hollowBOT Sep 17, 2025, 3:39 PM

Hi @raw river. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

To keep your HTML code clean and well-formatted in a Next.js 15 project, here are some practical tips based on the knowledge sources:

Use a Linter and Formatter
Next.js supports both ESLint and Biome for linting and formatting. These tools help enforce consistent code style and catch potential issues early. You can set up scripts in your package.json:
```
{
  "scripts": {
    "lint": "eslint",
    "lint:fix": "eslint --fix",
    "format": "biome format --write"
  }
}
```
If you use ESLint, it's recommended to create an explicit config file (like eslint.config.mjs). For Biome, you can use it for both linting and formatting. This ensures your codebase remains clean and consistent automatically Set up linting.
Consistent Formatting
Use tools like Prettier (or Biome, which also formats) to automatically format your code. This helps maintain readability and a uniform style across your project.
Component Structure
Organize your components logically and avoid deeply nested structures. Use fragments (<>...</>) or semantic HTML elements where appropriate, and avoid unnecessary wrappers.
Avoid Dangerous HTML Practices
Do not use dangerouslySetInnerHTML or direct DOM manipulation unless absolutely necessary, as these can introduce security risks and make your code harder to maintain. If you must use them, always sanitize the content first NO_DANGEROUS_HTML.

Accessibility and Semantic HTML
Use semantic HTML tags and follow accessibility best practices. Next.js recommends using the built-in eslint-plugin-jsx-a11y to catch accessibility issues early Production Checklist.
Keep Layouts Clean
In Next.js 15, only your root layout (src/app/layout.tsx) should include <html> and <body> tags. All other layouts should use fragments or divs, not additional <html> or <body> tags, to avoid hydration errors and maintain valid HTML structure Github Issue: Missing <html> and <body> tags.

By following these practices and leveraging the built-in tooling, you can keep your HTML clean, maintainable, and production-ready in your Next.js 15 project.