Project Purpose
This project is "Parker Chen's Next.js Laboratory", focusing on Next.js ecosystem integration and experimentation
, and demonstrates topics such as multi-language, PWA, ISR, security, real-time interaction through actual pages and APIs.
See also the Original Nuxt Project
Core Modules and Technologies
- Next.js 16, React 19, Redux Toolkit state management
- Material-UI component library
- next-intl multi-language (including locale directories and browser language detection)
- Serwist PWA (injectManifest, custom service-worker)
- SCSS + PostCSS (including px-to-rem and custom plugin)
Rendering and Caching Strategy
Routes adopt a hybrid strategy of SSR and ISR, with both homepage and multi-language routes enabled with ISR.
- Global prerendering for complete PWA caching
- Most feature pages (components, directives, css-drawing, route...) set to ISR
- Next.js App Router architecture
API and Integration Items
- WebAuthn (registration/verification flow)
- FIDO2-lib implementation
- Firebase Admin push notifications (Web / iOS / Android) and Token maintenance
- Frontend API cache testing and Scroll Fetch examples
- Server-Sent Events and Socket.IO examples
PWA and App Appearance
- Integrate service worker with Serwist, automate offline and version updates
- Custom Manifest (name, language, colors, icons)
- Site icons and Favicon configured, display mode is standalone
Multi-language and Navigation
- Support zh / en, with language switching UI
- Page head sets lang and multi-language routes
- Site name and title integrate i18n copywriting
Featured Pages and Experiments
- Components / Directives / CSS Drawing demo pages
- WebAuthn, FIDO2, biometric authentication flow
- WebCam and face recognition (Face API)
- Server-Sent Events and Socket.IO interaction testing
- Frontend API cache testing (Frontend API Cache Test)
- Firebase (including Cloud Messaging)
Design and Copyright
- Site images and icons are generated and designed with assistance from Google Gemini
- © Parker Chen's Next.js Laboratory