Back to articles

Building a Static Portfolio with Next.js

Architecture6 min read

Notes on structuring bilingual content, static rendering, and a focused single-page route.

01

Keep portfolio content typed and local

A small portfolio does not need a runtime content service. Typed TypeScript data makes project, article, and navigation contracts visible to the components that render them and catches missing localized fields during the build.

02

Separate static routes from client preferences

Next.js can pre-render the route and article slugs while a small client provider remembers the visitor language. The content stays static and cacheable; only the presentation language changes after hydration.

03

Use the production build as the contract

The build should validate every generated slug, client boundary, and localized data shape. Follow it with browser checks for navigation, language switching, article links, and the contact workflow.

  • Generate route params from the English and Thai shared slugs.
  • Keep user-facing copy synchronized across both locales.
  • Verify that every visible action reaches a real destination.
Open GitHub inquiry

Opens a public GitHub issue. Do not include private credentials or personal data you would not post publicly.

Continue reading

01

Development5 min read

React Best Practices for Maintainable Interfaces

Read article
02

Frontend4 min read

Tailwind CSS Patterns for Product UI

Read article