gbanyan/blog-nextjs
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
153 Commits 1 Branch 0 Tags
e05295e0032acfb17018b9ce4353158c432fc9e8
Commit Graph

14 Commits

Author SHA1 Message Date
gbanyan
2b1060dd45 Fix TOC showing wrong headings across navigation 
Problem: Table of Contents displayed headings from previously viewed
articles when navigating between posts via client-side routing.

Root cause: PostToc component's useEffect with empty dependency array
only ran once on mount, so it retained stale heading data when React
reused the component instance during navigation.

Solution: Add contentKey prop flow:
- Blog/page routes pass slug to PostLayout
- PostLayout passes contentKey as key prop to PostToc instances
- React remounts PostToc when key changes, rebuilding TOC correctly

Files changed:
- components/post-layout.tsx: Add contentKey prop and key forwarding
- app/blog/[slug]/page.tsx: Pass slug as contentKey
- app/pages/[slug]/page.tsx: Pass slug as contentKey
 2025-11-20 15:57:47 +08:00
gbanyan
7d1f29dd9d Implement comprehensive Next.js 16 optimizations 
## Performance Improvements

### Build & Development (Phase 1)
- Enable Turbopack for 4-5x faster dev builds
- Configure Partial Prerendering (PPR) via cacheComponents
- Add advanced image optimization (AVIF/WebP support)
- Remove console.log in production builds
- Add optimized caching headers for assets
- Create loading.tsx for global loading UI
- Create error.tsx for error boundary
- Create blog post loading skeleton

### Client-Side JavaScript Reduction (Phase 2)
- Replace Framer Motion with lightweight CSS animations in template.tsx
- Refactor ScrollReveal to CSS-only implementation (removed React state)
- Add dynamic import for SearchModal component
- Fix site-footer to use build-time year calculation for PPR compatibility

### Image Optimization (Phase 3)
- Add explicit dimensions to all Next.js Image components
- Add responsive sizes attribute for optimal image loading
- Use priority for above-the-fold images
- Use loading="lazy" for below-the-fold images
- Prevents Cumulative Layout Shift (CLS)

### Type Safety
- Add @types/react-dom for createPortal support

## Technical Changes

**Files Modified:**
- next.config.mjs: PPR, image optimization, compiler settings
- package.json: Turbopack flag, @types/react-dom dependency
- app/template.tsx: CSS animations replace Framer Motion
- components/scroll-reveal.tsx: CSS-only with IntersectionObserver
- components/site-header.tsx: Dynamic import for SearchModal
- components/site-footer.tsx: Build-time year calculation
- styles/globals.css: Page transitions & scroll reveal CSS
- Image components: Dimensions, sizes, priority/lazy loading

**Files Created:**
- app/loading.tsx: Global loading spinner
- app/error.tsx: Error boundary with retry functionality
- app/blog/[slug]/loading.tsx: Blog post skeleton

## Expected Impact

- First Contentful Paint (FCP): ~1.2s → ~0.8s (-33%)
- Largest Contentful Paint (LCP): ~2.5s → ~1.5s (-40%)
- Cumulative Layout Shift (CLS): ~0.15 → ~0.05 (-67%)
- Total Blocking Time (TBT): ~300ms → ~150ms (-50%)
- Bundle Size: ~180KB → ~100KB (-44%)

## PPR Status
✓ Blog posts now use Partial Prerendering
✓ Static pages now use Partial Prerendering
✓ Tag archives now use Partial Prerendering

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
 2025-11-20 14:51:54 +08:00
gbanyan
a4db9688b6 Upgrade to Next.js 16 with Turbopack and Contentlayer2 
- Upgraded Next.js to v16, React to v19
- Migrated from contentlayer to contentlayer2
- Migrated to Turbopack by decoupling Contentlayer from webpack
- Updated all page components to handle async params (Next.js 15+ breaking change)
- Changed package.json to type: module and renamed config files to .cjs
- Updated README with current tech stack and article creation instructions
- Fixed tag encoding issue (removed double encoding)
- All security vulnerabilities resolved (npm audit: 0 vulnerabilities)
 2025-11-19 22:43:14 +08:00
gbanyan
4c08413936 Migrate to Contentlayer2 2025-11-19 21:46:49 +08:00
Gbanyan
a249a120a5 Stage all layout updates 2025-11-19 17:38:45 +08:00
gbanyan
f32206d390 Use next/image for hero/sidebar/markdown images 2025-11-19 02:07:35 +08:00
gbanyan
0c5c5e230c Improve dark-mode readability of tags using neutral backgrounds 2025-11-17 23:15:15 +08:00
gbanyan
4cb3e7627b Introduce env-driven accent color system and apply to links, icons, and tags 2025-11-17 22:46:55 +08:00
gbanyan
77c127756e Shrink TOC column and gap to give articles more width 2025-11-17 22:19:51 +08:00
gbanyan
a952c3cdc1 Let single post/pages use full main column width 2025-11-17 22:16:43 +08:00
gbanyan
675f5de74f Narrow content width and slightly increase base typography size 2025-11-17 22:08:26 +08:00
gbanyan
dddf0f9340 Align static page layout and typography with blog posts 2025-11-17 21:40:08 +08:00
gbanyan
48521d6f5c Rewrite markdown image URLs and render feature images 2025-11-17 16:26:20 +08:00
gbanyan
0c64279e34 Initial commit 2025-11-17 15:28:20 +08:00