Next.js React Exported Components Guide 2025: Import, Type & Ship Fast

What You'll Build: Use Exported React Components in a Next.js App

By the end, you'll drop an exported headline component (from Pretty Headline) directly into a Next.js React app, style it with Tailwind, and render it as a Server Component by default for fast, SEO-friendly output. You'll also enable client-only variants as needed, add a navbar and modal around it, and measure Core Web Vitals.

• A reusable Next.js frontend hero with a typed, exported headline
• Clear boundaries between Server Components and Client Components
• Safe patterns for props, effects, and browser APIs

Prerequisites and Project Setup

Start a Next.js 14 App Router project

1. Create a project: npx create-next-app@latest (select TypeScript and App Router).
2. Run it: npm run dev and open http://localhost:3000.
3. Read up on file-system routing and layouts so you know where to place components.

Add Tailwind CSS for rapid styling

1. Install Tailwind and peers, then init configs (tailwind.config.js, postcss.config.js).
2. Add directives to your global CSS: @tailwind base; @tailwind components; @tailwind utilities;.
3. Restart dev server and verify classes apply.

Enable TypeScript for safer components

1. Ensure your project uses TypeScript (Create Next App can set this up).
2. Turn on "strict": true in tsconfig.json for safer props and fewer runtime bugs.

Typed props make exported Next.js components easier to scale and share across routes.

Server Components vs Client Components: Pick the Right Boundary

When your exported component can be a Server Component

• Render static variants on the server for the fastest path to content.
• Fetch copy on the server (e.g., from CMS) and pass as props.

Add 'use client' for interactive variants

If your headline animates on hover, toggles variants with useState, or reads window/localStorage, convert it to a Client Component.

/* app/components/PrettyHeadline.client.tsx */
'use client';
import React, { useState } from 'react';

export default function PrettyHeadlineClient({ title }: { title: string }) {
  const [emphasis, setEmphasis] = useState(false);
  return (
    <h1 className={`text-4xl md:text-5xl ${emphasis ? 'tracking-tight' : 'tracking-normal'}`}>
      {title}
      <button className="ml-3 text-sm underline" onClick={() => setEmphasis((v) => !v)}>
        Toggle
      </button>
    </h1>
  );
}

Fix "localStorage is not defined" in Next.js

Browser-only APIs like localStorage don't exist on the server. Use guards or effects:

'use client';
import { useEffect, useState } from 'react';

export function useSafeLocalStorage(key: string) {
  const [value, setValue] = useState<string | null>(null);
  useEffect(() => {
    if (typeof window === 'undefined') return;
    try {
      const v = window.localStorage.getItem(key);
      setValue(v);
    } catch {}
  }, [key]);
  return value;
}

Alternatively, dynamically import a client-only wrapper with SSR disabled when you must: see Dynamic import for client-only usage below. This avoids localStorage is not defined during Next.js server-side rendering.

Organize and Import Your Exported Component

Where to place files: app components and shared UI

• app/components/: shared UI primitives (Server by default).
• app/components/client/: client-only versions with 'use client'.
• app/(marketing)/, app/(admin)/: route groups and nested layouts.

Use in layouts and pages and pass props safely

/* app/(marketing)/layout.tsx */
import React from 'react';
import PrettyHeadline from '@/components/PrettyHeadline';

export default function MarketingLayout({ children }: { children: React.ReactNode }) {
  return (
    <section className="px-6 py-10">
      <PrettyHeadline title="Design better copy" highlight="faster" as="h1" />
      {children}
    </section>
  );
}

Dynamic import for client-only usage

/* app/page.tsx (Server Component) */
import dynamic from 'next/dynamic';
const HeadlineClient = dynamic(() => import('@/components/client/PrettyHeadline.client'), {
  ssr: false, // prevent server render
});

export default function Page() {
  return (
    <main>
      <HeadlineClient title="Hello, browser-only world" />
    </main>
  );
}

This pattern ensures client APIs are never executed during SSR (ssr next js).

Style and Theme Integration

Apply Tailwind utilities to the exported markup

Map semantic parts of your headline to Tailwind design tokens for instant consistency. Tailwind's utility-first approach speeds up iteration and keeps bundles tight.

<PrettyHeadline
  title="Stop losing clicks"
  highlight="today"
  className="text-4xl md:text-5xl text-gray-900 dark:text-white [text-wrap:balance]"
/>

Alternative: Combine with CSS Modules

/* app/components/pretty-headline.module.css */
.title { font-weight: 700; letter-spacing: -0.01em; }
.highlight { background: #fde68a; padding: 0 .25rem; border-radius: .125rem; }

/* app/components/PrettyHeadline.tsx */
import styles from './pretty-headline.module.css';
// ... apply styles.title / styles.highlight as needed

Performance, Fonts, and Core Web Vitals

Load Google Fonts with next/font

/* app/fonts.ts */
import { Inter, Playfair_Display } from 'next/font/google';
export const inter = Inter({ subsets: ['latin'], display: 'swap' });
export const playfair = Playfair_Display({ subsets: ['latin'], display: 'swap' });

/* app/layout.tsx */
import { inter } from './fonts';
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body className={inter.className}>{children}</body>
    </html>
  );
}

Using next/font avoids layout shifts and improves next/core-web-vitals metrics by self-hosting and optimizing font loading.

Trim bundle size and avoid re-renders

• Prefer Server Components for static UI.
• Memoize client components with React.memo when appropriate.
• Keep exports small and avoid heavy client libraries.
• Static export pages when possible to reduce client JS.

Why this helps: Next.js can output per-route HTML and avoid loading unnecessary client-side code when configured for static export.

Measure and improve using Core Web Vitals

• Track LCP on hero changes (your headline is usually the LCP element).
• Use Lighthouse or PageSpeed Insights to verify CLS/INP improvements.
• Iterate on font sizing, contrast, and RSC boundaries.

Troubleshooting and FAQs

Step-by-Step Checklist

1. Create a Next.js App Router project and enable TypeScript strict mode.
2. Install Tailwind and add directives to global CSS.
3. Design a headline in Pretty Headline and export React/TS.
4. Place the component in app/components/ and import it into a layout or page.
5. Keep it a Server Component unless it needs state/effects; then add 'use client'.
6. Guard browser APIs or use dynamic import with ssr: false.
7. Load fonts with next/font, measure LCP, and iterate.
8. Share the component across route groups (marketing/admin) with path aliases.
9. Optionally personalize with SSR or SWR.
10. Consider static export for routes that don't need server logic.

FAQ

Wrap-Up and CTA

Exported UI should drop into your stack without friction. With the App Router's server-first model, Tailwind, and typed props, you'll ship a fast hero and iterate with confidence.

• Speed: Build and export polished copy in minutes.
• Quality: Professional typography and semantic structure.
• Flexibility: Export as HTML, React, or images for any channel.
• Privacy & simplicity: 100% browser-based; no signup needed.

Ready to go? Design your headline using the editor and export it as HTML, React code, PNG, JPG, or WebP. For broader workflow ideas, explore our take on developer productivity tools.