Next.js Supabase V3 (#463)
Version 3 of the kit: - Radix UI replaced with Base UI (using the Shadcn UI patterns) - next-intl replaces react-i18next - enhanceAction deprecated; usage moved to next-safe-action - main layout now wrapped with [locale] path segment - Teams only mode - Layout updates - Zod v4 - Next.js 16.2 - Typescript 6 - All other dependencies updated - Removed deprecated Edge CSRF - Dynamic Github Action runner
This commit is contained in:
Giancarlo Buomprisco
committed by
GitHub
GitHub
parent
4912e402a3
commit
7ebff31475
194
docs/customization/logo.mdoc
Normal file
194
docs/customization/logo.mdoc
Normal file
@@ -0,0 +1,194 @@
|
||||
---
|
||||
status: "published"
|
||||
label: "Updating the Logo"
|
||||
title: "Customize Your Application Logo | Next.js Supabase SaaS Kit"
|
||||
order: 1
|
||||
description: "Replace the default Makerkit logo with your own brand logo using SVG, image files, or custom React components."
|
||||
---
|
||||
|
||||
Replace the default Makerkit logo by editing the `AppLogo` component at `apps/web/components/app-logo.tsx`. This single component controls the logo across your entire application: authentication pages, site header, footer, sidebar, and email templates.
|
||||
|
||||
## Quick Start
|
||||
|
||||
Open `apps/web/components/app-logo.tsx` and replace the existing SVG with your logo:
|
||||
|
||||
```tsx title="apps/web/components/app-logo.tsx"
|
||||
import Link from 'next/link';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
function LogoImage({ className }: { className?: string }) {
|
||||
return (
|
||||
<img
|
||||
src="/images/logo.svg"
|
||||
alt="Your Company Name"
|
||||
className={cn('w-[80px] lg:w-[95px]', className)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export function AppLogo({
|
||||
href,
|
||||
label,
|
||||
className,
|
||||
}: {
|
||||
href?: string | null;
|
||||
className?: string;
|
||||
label?: string;
|
||||
}) {
|
||||
if (href === null) {
|
||||
return <LogoImage className={className} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Link aria-label={label ?? 'Home Page'} href={href ?? '/'}>
|
||||
<LogoImage className={className} />
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Place your logo file in `apps/web/public/images/` and update the `src` path accordingly.
|
||||
|
||||
## Logo Implementation Options
|
||||
|
||||
### Option 1: SVG Component (Recommended)
|
||||
|
||||
Inline SVGs provide the best performance and allow dynamic styling with Tailwind classes:
|
||||
|
||||
```tsx title="apps/web/components/app-logo.tsx"
|
||||
function LogoImage({ className }: { className?: string }) {
|
||||
return (
|
||||
<svg
|
||||
className={cn('w-[95px] h-auto', className)}
|
||||
viewBox="0 0 100 32"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
className="fill-primary dark:fill-white"
|
||||
d="M10 5h80v22H10z"
|
||||
/>
|
||||
{/* Your SVG paths */}
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
**Benefits:**
|
||||
- Supports `fill-primary` for automatic theme color adaptation
|
||||
- Responds to dark mode with `dark:fill-white`
|
||||
- Scales without quality loss
|
||||
- No additional HTTP requests
|
||||
|
||||
### Option 2: Next.js Image Component
|
||||
|
||||
For PNG, JPG, or WebP logos, use `next/image` for automatic optimization:
|
||||
|
||||
```tsx title="apps/web/components/app-logo.tsx"
|
||||
import Image from 'next/image';
|
||||
|
||||
function LogoImage({ className }: { className?: string }) {
|
||||
return (
|
||||
<Image
|
||||
src="/images/logo.png"
|
||||
alt="Your Company Name"
|
||||
width={95}
|
||||
height={32}
|
||||
className={cn('w-[80px] lg:w-[95px] h-auto', className)}
|
||||
priority
|
||||
/>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
### Option 3: Dark Mode Variants
|
||||
|
||||
When your logo needs different versions for light and dark modes:
|
||||
|
||||
```tsx title="apps/web/components/app-logo.tsx"
|
||||
import Image from 'next/image';
|
||||
import { cn } from '@kit/ui/utils';
|
||||
|
||||
function LogoImage({ className }: { className?: string }) {
|
||||
return (
|
||||
<>
|
||||
<Image
|
||||
src="/images/logo-dark.svg"
|
||||
alt="Your Company Name"
|
||||
width={95}
|
||||
height={32}
|
||||
className={cn('hidden dark:block w-[80px] lg:w-[95px]', className)}
|
||||
priority
|
||||
/>
|
||||
<Image
|
||||
src="/images/logo-light.svg"
|
||||
alt="Your Company Name"
|
||||
width={95}
|
||||
height={32}
|
||||
className={cn('block dark:hidden w-[80px] lg:w-[95px]', className)}
|
||||
priority
|
||||
/>
|
||||
</>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
## Where the Logo Appears
|
||||
|
||||
The `AppLogo` component renders in these locations:
|
||||
|
||||
| Location | File Path | Notes |
|
||||
|----------|-----------|-------|
|
||||
| Site Header | `packages/ui/src/makerkit/marketing/header.tsx` | Marketing pages |
|
||||
| Site Footer | `packages/ui/src/makerkit/marketing/footer.tsx` | All pages |
|
||||
| Auth Pages | `apps/web/app/[locale]/auth/layout.tsx` | Sign in, sign up |
|
||||
| App Sidebar | `packages/ui/src/makerkit/sidebar-navigation.tsx` | Dashboard (when team accounts disabled) |
|
||||
| Email Templates | `packages/email-templates/src/` | Transactional emails |
|
||||
|
||||
## Favicon and Social Images
|
||||
|
||||
Update these additional brand assets in `apps/web/app/`:
|
||||
|
||||
```
|
||||
apps/web/app/
|
||||
├── favicon.ico # Browser tab icon (32x32)
|
||||
├── icon.png # PWA icon (512x512)
|
||||
├── apple-icon.png # iOS home screen (180x180)
|
||||
└── opengraph-image.png # Social sharing (1200x630)
|
||||
```
|
||||
|
||||
Generate these from your logo using tools like [RealFaviconGenerator](https://realfavicongenerator.net/) or [Favicon.io](https://favicon.io/).
|
||||
|
||||
## Common Mistakes
|
||||
|
||||
**Using low-resolution images**: Logos appear blurry on high-DPI displays. Always use SVG when possible, or provide 2x/3x image assets.
|
||||
|
||||
**Forgetting alt text**: Screen readers need descriptive alt text. Use your company name, not "logo".
|
||||
|
||||
**Hard-coded dimensions**: Use responsive classes like `w-[80px] lg:w-[95px]` instead of fixed pixel widths to ensure the logo scales appropriately on mobile.
|
||||
|
||||
**Missing priority attribute**: Add `priority` to Next.js Image components for above-the-fold logos to prevent layout shift.
|
||||
|
||||
## Verification
|
||||
|
||||
After updating your logo:
|
||||
|
||||
1. Check the marketing header at `http://localhost:3000`
|
||||
2. Verify the auth pages at `http://localhost:3000/auth/sign-in`
|
||||
3. Test dark mode toggle to confirm logo visibility
|
||||
4. Inspect mobile viewport (375px width) for proper sizing
|
||||
|
||||
{% faq
|
||||
title="Frequently Asked Questions"
|
||||
items=[
|
||||
{"question": "How do I make my SVG logo change color with the theme?", "answer": "Use Tailwind's fill classes on your SVG paths: fill-primary for the default theme color, or dark:fill-white to change in dark mode. Remove any hardcoded fill attributes from the SVG."},
|
||||
{"question": "What size should my logo be?", "answer": "Design for 95px width on desktop and 80px on mobile. SVGs scale automatically. For raster images, export at 2x resolution (190x64 pixels minimum) to support high-DPI displays."},
|
||||
{"question": "Can I use different logos in different parts of the app?", "answer": "Yes. You can modify the AppLogo component to accept a variant prop or create separate components. However, maintaining brand consistency is recommended."},
|
||||
{"question": "How do I update the logo in email templates?", "answer": "Email templates use the same AppLogo component where possible, but some email clients require inline images. Check packages/email-templates/src/components/ for email-specific logo handling."}
|
||||
]
|
||||
/%}
|
||||
|
||||
## Next Steps
|
||||
|
||||
- Back to [Customization Overview](/docs/next-supabase-turbo/customization)
|
||||
- Configure your [brand colors and theme](/docs/next-supabase-turbo/customization/theme)
|
||||
- Customize your [application fonts](/docs/next-supabase-turbo/customization/fonts)
|
||||
Reference in New Issue
Block a user