Skip to content

Commit 4ee906e

Browse files
rahuldkjainrahuldkjain
committed
chore: load assets with assetPrefix
1 parent 2dbe4c1 commit 4ee906e

File tree

5 files changed

+129
-98
lines changed

5 files changed

+129
-98
lines changed

‎next.config.ts‎

Lines changed: 107 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,115 @@
11
import type { NextConfig } from 'next';
2+
import { PHASE_PRODUCTION_BUILD } from 'next/constants';
23

3-
const nextConfig: NextConfig = {
4-
// Output as static site for GitHub Pages
5-
output: 'export',
6-
7-
// Base path for GitHub Pages (only in production AND not for Surge previews)
8-
basePath:
9-
process.env.NODE_ENV === 'production' && !process.env.SURGE_PREVIEW
10-
? '/github-profile-readme-generator'
11-
: '',
12-
13-
// Image optimization for static export
14-
images: {
15-
unoptimized: true, // Required for static export
16-
},
17-
18-
// Trailing slashes for better compatibility
19-
trailingSlash: true,
20-
21-
// Enable strict mode for better error catching
22-
reactStrictMode: true,
23-
24-
// Enable experimental features for better performance
25-
experimental: {
26-
// Optimize CSS
27-
optimizeCss: true,
28-
// Enable optimized package imports for heavy libraries
29-
optimizePackageImports: [
30-
'framer-motion',
31-
'@hookform/resolvers',
32-
'react-markdown',
33-
'remark-gfm',
34-
'rehype-raw',
35-
'rehype-sanitize',
36-
'zod',
37-
'zustand',
38-
'lucide-react',
39-
'@headlessui/react',
40-
],
41-
},
42-
43-
// Compiler options for better performance
44-
compiler: {
45-
// Remove console.log in production
46-
removeConsole: process.env.NODE_ENV === 'production' ? { exclude: ['error', 'warn'] } : false,
47-
// Enable React compiler optimizations
48-
reactRemoveProperties: process.env.NODE_ENV === 'production',
49-
},
50-
51-
// Optimize transpilation
52-
transpilePackages: ['react-markdown', 'remark-gfm', 'rehype-raw', 'rehype-sanitize'],
53-
54-
// Turbopack configuration (replaces webpack config)
55-
turbopack: {
56-
// Enable faster module resolution
57-
resolveAlias: {
58-
// Optimize common imports
59-
'@': './src',
4+
const nextConfig = (phase: string): NextConfig => {
5+
// Determine if we should use basePath (production build, not Surge preview)
6+
const isProductionBuild = phase === PHASE_PRODUCTION_BUILD;
7+
const isSurgePreview = process.env.SURGE_PREVIEW === 'true';
8+
const shouldUseBasePath = isProductionBuild && !isSurgePreview;
9+
const basePath = shouldUseBasePath ? '/github-profile-readme-generator' : '';
10+
11+
return {
12+
// Output as static site for GitHub Pages
13+
output: 'export',
14+
15+
// Base path for GitHub Pages (only for production builds, not Surge previews)
16+
basePath,
17+
18+
// Asset prefix to ensure all assets use the correct path
19+
assetPrefix: shouldUseBasePath ? '/github-profile-readme-generator/' : '',
20+
21+
// Environment variables
22+
env: {
23+
NEXT_PUBLIC_BASE_PATH: basePath,
6024
},
61-
},
62-
63-
// Webpack optimizations for development (only when not using Turbopack)
64-
webpack: (config, { dev, isServer }) => {
65-
if (dev && !isServer && !process.env.TURBOPACK) {
66-
// Optimize development builds
67-
config.optimization = {
68-
...config.optimization,
69-
splitChunks: {
70-
chunks: 'all',
71-
cacheGroups: {
72-
vendor: {
73-
test: /[\\/]node_modules[\\/]/,
74-
name: 'vendors',
75-
chunks: 'all',
76-
priority: 10,
77-
},
78-
markdown: {
79-
test: /[\\/]node_modules[\\/](react-markdown|remark-|rehype-)/,
80-
name: 'markdown',
81-
chunks: 'all',
82-
priority: 20,
25+
26+
// Image optimization for static export
27+
images: {
28+
unoptimized: true, // Required for static export
29+
},
30+
31+
// Trailing slashes for better compatibility
32+
trailingSlash: true,
33+
34+
// Enable strict mode for better error catching
35+
reactStrictMode: true,
36+
37+
// Enable experimental features for better performance
38+
experimental: {
39+
// Optimize CSS
40+
optimizeCss: true,
41+
// Enable optimized package imports for heavy libraries
42+
optimizePackageImports: [
43+
'framer-motion',
44+
'@hookform/resolvers',
45+
'react-markdown',
46+
'remark-gfm',
47+
'rehype-raw',
48+
'rehype-sanitize',
49+
'zod',
50+
'zustand',
51+
'lucide-react',
52+
'@headlessui/react',
53+
],
54+
},
55+
56+
// Compiler options for better performance
57+
compiler: {
58+
// Remove console.log in production
59+
removeConsole: isProductionBuild ? { exclude: ['error', 'warn'] } : false,
60+
// Enable React compiler optimizations
61+
reactRemoveProperties: isProductionBuild,
62+
},
63+
64+
// Optimize transpilation
65+
transpilePackages: ['react-markdown', 'remark-gfm', 'rehype-raw', 'rehype-sanitize'],
66+
67+
// Turbopack configuration (replaces webpack config)
68+
turbopack: {
69+
// Enable faster module resolution
70+
resolveAlias: {
71+
// Optimize common imports
72+
'@': './src',
73+
},
74+
},
75+
76+
// Webpack optimizations for development (only when not using Turbopack)
77+
webpack: (config, { dev, isServer }) => {
78+
if (dev && !isServer && !process.env.TURBOPACK) {
79+
// Optimize development builds
80+
config.optimization = {
81+
...config.optimization,
82+
splitChunks: {
83+
chunks: 'all',
84+
cacheGroups: {
85+
vendor: {
86+
test: /[\\/]node_modules[\\/]/,
87+
name: 'vendors',
88+
chunks: 'all',
89+
priority: 10,
90+
},
91+
markdown: {
92+
test: /[\\/]node_modules[\\/](react-markdown|remark-|rehype-)/,
93+
name: 'markdown',
94+
chunks: 'all',
95+
priority: 20,
96+
},
8397
},
8498
},
85-
},
86-
};
87-
88-
// Enable faster rebuilds
89-
config.cache = {
90-
type: 'filesystem',
91-
buildDependencies: {
92-
config: [__filename],
93-
},
94-
};
95-
}
96-
97-
return config;
98-
},
99+
};
100+
101+
// Enable faster rebuilds
102+
config.cache = {
103+
type: 'filesystem',
104+
buildDependencies: {
105+
config: [__filename],
106+
},
107+
};
108+
}
109+
110+
return config;
111+
},
112+
};
99113
};
100114

101115
export default nextConfig;

‎src/app/layout.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import { ToastProvider } from '@/components/ui/toast';
77
import { BuyMeACoffeeWidget } from '@/components/ui/buy-me-coffee';
88
import { ConditionalAnalytics } from '@/components/analytics/conditional-analytics';
99
import { CookieConsent } from '@/components/ui/cookie-consent';
10+
import { getAssetPath } from '@/lib/asset-path';
1011

1112
const robotoMono = Roboto_Mono({
1213
variable: '--font-mono',
@@ -83,11 +84,11 @@ export const metadata: Metadata = {
8384
icons: {
8485
icon: [
8586
{ url: '/favicon.ico', sizes: 'any' },
86-
{ url: '/mdg.png', type: 'image/png' },
87+
{ url: getAssetPath('/mdg.png'), type: 'image/png' },
8788
],
88-
apple: '/mdg.png',
89+
apple: getAssetPath('/mdg.png'),
8990
},
90-
manifest: '/manifest.json',
91+
manifest: getAssetPath('/manifest.json'),
9192
robots: {
9293
index: true,
9394
follow: true,

‎src/components/layout/footer.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import Link from 'next/link';
22
import Image from 'next/image';
3+
import { getAssetPath } from '@/lib/asset-path';
34

45
export function Footer() {
56
return (
@@ -8,7 +9,7 @@ export function Footer() {
89
{/* Logo Section */}
910
<div className="mb-8 flex items-center justify-center gap-3">
1011
<Image
11-
src="/mdg.png"
12+
src={getAssetPath('/mdg.png')}
1213
alt="GitHub Profile README Generator Logo"
1314
width={48}
1415
height={48}

‎src/components/layout/header.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { usePathname } from 'next/navigation';
66
import { ThemeToggle } from '@/components/ui/theme-toggle';
77
import { AccessibilityMenu } from '@/components/ui/accessibility-menu';
88
import { GitHubStats } from '@/components/ui/github-stats';
9+
import { getAssetPath } from '@/lib/asset-path';
910

1011
const navigation = [
1112
{ name: 'Generator', href: '/' },
@@ -30,7 +31,7 @@ export function Header({}: HeaderProps = {}) {
3031
<div className="flex items-center gap-4">
3132
<Link href="/" prefetch={true} className="flex items-center gap-3 hover:opacity-80">
3233
<Image
33-
src="/mdg.png"
34+
src={getAssetPath('/mdg.png')}
3435
alt="GitHub Profile README Generator Logo"
3536
width={40}
3637
height={40}

‎src/lib/asset-path.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
/**
2+
* Get the correct asset path with basePath for GitHub Pages
3+
* Uses NEXT_PUBLIC_BASE_PATH environment variable if set
4+
*/
5+
6+
export function getAssetPath(path: string): string {
7+
// Ensure path starts with /
8+
const normalizedPath = path.startsWith('/') ? path : `/${path}`;
9+
10+
// Use NEXT_PUBLIC_BASE_PATH if set, otherwise detect based on build
11+
const basePath = process.env.NEXT_PUBLIC_BASE_PATH || '';
12+
13+
return `${basePath}${normalizedPath}`;
14+
}

0 commit comments

Comments
 (0)