Skip to main content

export default ↔ Named Export with default name

export default function f() {}
export default class MyClass {}
export default 123 // any value
export default myFunc
export default MyClass
export default Math.sqrt(2)
export default "a" + "b" + "c"
function wasd() {}
export { wasd as default }

default is illegal Identifier for Variable but can be used as export name (or as Property Key)

Max ONE Default Export allowed for each module

Module itself = default-exported value

Default Export usually for module with single function/class

// export default const not allowed because following would export 1+ value
export default a=1, b=2, c=3

References​

  1. loading.tsx ↔ ( Next 13 ) Page to export default loading UI on Trigger Suspense Boundary

  2. page.tsx ↔ Page export default UI for Next Route vs dirpath, default Server Component - else "use client" opt-in

  3. layout.tsx ↔ ( Next 13 ) Page to export default layout UI to share with children

  4. not-found.tsx ↔ ( Next 13 ) Page to export default UI for Catch All Route

  5. error.tsx ↔ ( Next 13 ) Page to export default UI on Trigger Error Boundary

  6. head.tsx ↔ ( Next 13 ) Page to export default <head\> for each Page Route

  7. [id].tsx ↔ ( Next 12 ) FC to export default Page with Dynamic Route with _id URL Parameter

  8. Story ↔ export default Object to Declaratively render FC snapshot with specific key state to dev/test/doc

<code>export</code>  default {
  title "Button",
  component: Button
}

<code>export</code>  const ButtonRed = () => <Button label="Press me" backgroundColor="red" /\>
  1. Page ↔ export default FC to display unique UI for next File System Router