Why Assign Variables Just to Export Them?

Next.js Page Components

Common Page components in Next.js.

const Page: FC = () => {
    return <div>Page</div>
}

export default Page;

// Or
export default function Page() {
    return <div>Page</div>
}

Isn't this better?

page.tsx

export default (() => {
    return <div>Page</div>
}) satisfies FC

layout.tsx

export default (({children}) => {
    return <div>{children}</div>
}) satisfies FC<{ children: ReactNode }>

• No need to think of a variable name!
• By writing export first, you avoid forgetting to export!
• Unlike function declarations, you can guarantee it's a functional component with types!
• It just looks cool!

Common Objects in Config Files

const config:Config = {
    key: 'value'
}

export default config;

Isn't this better?

export default {
    key: 'value'
} satisfies Config

Summary

Let's eliminate unnecessary variable declarations.