Ssg

Introduction When performing Static Site Generation (SSG) with Nuxt 4, you may want to load data from local JSON files to generate static pages. However, it is not as simple as Next.js’s getStaticProps, and there are several pitfalls to be aware of. This article introduces the correct approach discovered through trial and error. Problem: Why Simple fs Reading Doesn’t Work First Approach (Failed) c } o ; n i } c r ❌ s f o e t c c c c r n t T ( o o o o e C s u h f i n n n n t l t r i e m s s s s u i n s t p t t t t r e r c o n n e a d h r f p f d t s w o L t s a u a J p a e o . t l t S s o i s c m = h l a O i n t n a e P N d s ' l t a = a = . e e r t D a w t p e a . a a h f a = s w t s i w s r p o a e t a = . s a o r r i r e w n k = v i t p e ( a s e m a a d i e a r p i t d a t . s ) o m h F t j y r p . i a f s n { t o r l ) e o c ( r e e ; t n ' t s S c ( ( f ( o y h ) f s ' l n ( ; i ' p v c ` l ) a e ( / e ; t ( f d P h p u a a ' r l t t ) o l a h ; c P / : e a $ s t { s s h f t . , i r c l i w ' e n d u P g ( t a ) ) f t , - h = 8 } > ' ' ` p ) ) { u ; ; b l i c / d a t a ' , f i l e P a t h ) ; This approach has the following problems: ...

This article was reviewed by a human for implementation and written by AI. Overview This template is a starting point for web application development that supports static site generation (SSG) with Next.js 15, with built-in multilingual support and dark mode. It combines TypeScript, Tailwind CSS, next-intl, and next-themes. https://nextjs-i18n-themes-ssg-template.vercel.app/ja/ Key Features 1. Static Site Generation (SSG) Full static export with output: 'export' Fast page loading and SEO optimization Reduced hosting costs 2. Internationalization (i18n) Full multilingual support with next-intl Japanese and English support (easy to add more languages) URL-based language switching (/ja/about, /en/about) Type-safe translation keys 3. Dark Mode System-linked dark mode with next-themes Automatic detection of user preferences Smooth theme switching animation Persistent settings via LocalStorage 4. Improved Developer Experience Type safety with TypeScript Efficient styling with Tailwind CSS Code quality management with ESLint Unified component structure Tech Stack { } " } d e " " " " " " p n r n n t @ e e e e e a t n x a x x i a d t c t t l i e " t - - w l n : " i t i w c : n h n i i " t e d n e ^ " l m c d s 1 ^ " e s c " 5 1 : s s s : . 9 " " s 4 . " : : / { . 1 ^ t 4 . 4 " " y " 0 . ^ ^ p , " 3 0 4 o , . . . g 4 4 1 r " . . a , 6 1 p " 1 h , " y , " : " ^ 0 . 5 . 1 6 " Project Structure s ├ │ │ │ │ │ │ │ ├ │ │ │ │ │ │ │ ├ │ └ r ─ ─ ─ ─ c ─ ─ ─ ─ / a ├ │ │ │ │ ├ └ c ├ │ │ │ │ │ └ i └ m ├ └ p ─ ─ ─ o ─ ─ 1 ─ e ─ ─ p ─ ─ ─ m ─ ─ 8 ─ s ─ ─ / p n s [ ├ ├ ├ └ i s o l ├ ├ ├ ├ └ p / r a e j l ─ ─ ─ ─ c i n a ─ ─ ─ ─ ─ a o g n a o ─ ─ ─ ─ o t e y ─ ─ ─ ─ ─ g u e . . c n e n o e t s j j a l p a e . m t u H F P T T i / s s l a a b x s a s t e o a o n o o e y g o a v p / a o g g g g n n ] e u m g . d t e g g . u . t p t e e L l l t t t / l s r r a e e s . s e . . y T L t x / t t o h a s s s u e n x x x t m g . e u t . a s t g x s e x . # # # t # # # # # # # s F S L x P i T R H A S a i a a 1 r o o b a v t y g 8 a o m o m i e o e n n t e u p c m u - s t l o a t s c l l p e n p p o a a a p c e n t y g a p g o c f i o e g a e m i i o u e g n p f g n t e e o i u r n c r f a e a i t n c t l i t o i e o s m o s n p n o n e n t s Notable Implementations 1. Static Export Support for sitemap.ts e e e } x x x p p p o o r r r t t t I m c c d p o o e l n n f e s s a m t t u e l n d r t t y e a n v f t a a u i m l n o i i c n c d t a i = t o e n ' f = s o i r f t c a e e l m - s a s e p t ; ( a ) t : i c M ' e ; t a d a t a R o u t e . S i t e m a p { 2. Unified Page Layout < P / a b t d < P g r i e Y a e e t s o g L a l c u e a d e r r L y c = i C a o r { p o y u u t t n o t m ( i t u b ' o e t I t n n > t i = t e t { m l t s e ( = ' ' { ) d b } e r s e c a r d i c p r t u i m o b n I ' t ) e } m s } 3. Configuration via Environment Variables # N N E E . X X e T T n _ _ v P P . U U e B B x L L a I I m C C p _ _ l S B e I A T S E E _ _ U P R A L T = H h = t t p : / / l o c a l h o s t : 3 0 0 0 Usage Installation g c n i d p t m n c e i l x n o t s n j t e s a - l [ i l r 1 e 8 p n o - s t i h t e o m r e y s - - u s r s l g ] - t e m p l a t e Development n p m r u n d e v Build n p m r u n b u i l d Customization Points Adding languages: src/i18n/routing.ts and messages/ directory Adding pages: Create new directories under src/app/[locale]/ Theme customization: tailwind.config.js and global CSS Metadata: generateMetadata function in each page Best Practices Component naming: Use PascalCase Translation keys: Organize with nested structure Type safety: Maximize use of TypeScript types Performance: Cache strategy utilizing static generation Summary This template aims to enable quick construction of static sites optimized for SEO, with built-in internationalization and dark mode features. The goal is to improve developer productivity while providing an excellent experience for end users. ...

This article was written by AI after a human verified the implementation. Background When using static site generation (output: 'export') in Next.js 15, errors may occur with the sitemap.ts implementation. E r r o r : e x p o r t c o n s t d y n a m i c = " f o r c e - s t a t i c " / e x p o r t c o n s t r e v a l i d a t e n o t c o n f i g u r e d o n r o u t e " / s i t e m a p . x m l " w i t h " o u t p u t : e x p o r t " . Solution This issue can be resolved by adding the following two exports to sitemap.ts: ...