Difference Between export default and export

Feature	export default	export (Named Export)
Number per file	Only 1	Multiple allowed
Import name	Can be any name	Must match exported name
Curly braces	Not required	Required
Common use	Main component/function	Multiple utilities/functions

---

1. export default

File: User.js

export default function User() {
  return "User Component";
}

Import

import User from "./User";

You can even rename it:

import MyComponent from "./User";

or

import Anything from "./User";

Because default exports don’t require the original name.

---

2. Named Export (export)

File: helper.js

export const company = "Cybotrix";

export function getCompany() {
  return company;
}

Import

import { company, getCompany } from "./helper";

Must use the exact exported names.

---

Rename Named Export

import { company as companyName } from "./helper";

Now:

console.log(companyName);

---

Multiple Named Exports

export const name = "Raj";
export const city = "Bangalore";

export function getData() {}

Import:

import { name, city, getData } from "./file";

---

Default + Named Export Together

File

export const role = "Admin";

export function getRole() {
  return role;
}

export default function User() {
  return "User";
}

Import

import User, { role, getRole } from "./user";

---

React / Next.js Example

page.tsx

export default function HomePage() {
  return <h1>Home Page</h1>;
}

Next.js expects a default export for pages.

---

utils.ts

export const API_URL = "https://api.example.com";

export const VERSION = "1.0";

Import:

import { API_URL, VERSION } from "./utils";

---

Easy Way to Remember

Default Export

export default User;

Import:

import User from "./User";

❌ No curly braces.

---

Named Export

export const company = "Cybotrix";

Import:

import { company } from "./file";

✅ Curly braces required.

---

Interview Answer

export default is used when a file has one primary export. A file can have only one default export, and it can be imported with any name without curly braces. export (named export) is used when a file needs to export multiple variables, functions, or components. Named exports must be imported using curly braces and their exported names. For example, Next.js pages usually use export default, while utility files often use named exports.