Nextjs Engineering Practices

[reboottime]

Practices of using Next.js

• Styling Next.js Application Productively

[reboottime]

Productive Styling Solution for Next.js Application

What is PostCSS and what problems it solves

The popular application of PostCSS covers points below

• CSS Compatibility

  • Automatically adds vendor prefixes ( based on caniuse configuration)
  • Transforms modern CSS features for older browsers
  • Enables using future CSS syntax today

• CSS Modules for scoped styles

  • CSS Modules example, for code below
    • Define the Style
      
    • Usage in Components
      
  • The major benefits of using postcss module for scoped styles are as below
    • Eliminates global namespace pollution
    • Prevents style conflicts between components
    • Enables CSS reuse with predictable scoping

TailwindCSS

• The benefits of using TailwindCSS is pretty straightforward, see docs here.

• How tailwind works: Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

How this things work together

[reboottime]

Next.js Build Configuration Impact Matrix

Build Setting	Output Type	Server Runtime	API Routes	Headers	Static Files	Route Handlers
Default	Server-side	Yes	Yes	Preserved	Served by Next.js	Dynamic
output: 'export'	Static HTML	No	No	Not preserved	Served by host	Static only
output: 'standalone'	Self-contained	Yes	Yes	Preserved	Bundled	Dynamic

Key impacts with output: 'export':

• No server-side features (API, dynamic routes)
• Headers must be set at hosting level
• All pages pre-rendered at build time
• Route handlers must use force-static