Modern React App =>Next.js + TypeScript + Material UI (MUI)
Next.js + TypeScript + MUI
Wiki topics:
🌐 · Web Development
Modern React App =>Next.js + TypeScript + Material UI (MUI)
Next.js + TypeScript + MUI
You’re a React Developer and just found out about Next.js, a framework for React and want to try it out with TypeScript and MUI — Material UI Library but find setting up the project quite hectic. Don’t worry I’ll make it super easy for you.
Let’s start by creating a Next.js project with create-next-app.
1. Create a Next.js Project with TypeScript
Run this command:
npx create-next-app@latest <project_name> - typescript
cd <project_name>For Example- creating project Employee Attendance
npx create-next-app@latest employee_attendance - typescript
cd employee_attendanceThis creates a Next.js project already configured with TypeScript.
Run project:
npm run devOpen browser and hit below URL:
http://localhost:30002. Install Material UI
Install MUI packages:
npm install @mui/material @emotion/react @emotion/styledOptional icons package:
npm install @mui/icons-material3. Create MUI Theme (Recommended)
Create folder: /src/theme/theme.ts
import { createTheme } from "@mui/material/styles";
const theme = createTheme({
palette: {
primary: {
main: "#1976d2",
},
secondary: {
main: "#9c27b0",
},
},
});export default theme;4. Add Theme Provider
Edit **app/layout.tsx**
"use client";
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
import theme from "../theme/theme";
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>
<ThemeProvider theme={theme}>
<CssBaseline />
{children}
</ThemeProvider>
</body>
</html>
);
}5. Use MUI Components
Example Home Page
app/page.tsx
import { Button, Typography, Container } from "@mui/material";
export default function Home() {
return (
<Container>
<Typography variant="h4" gutterBottom>
Next.js + TypeScript + MUI
</Typography> <Button variant="contained" color="primary">
Click Me
</Button>
</Container>
);
}6. Project Structure (Recommended)
src
├── app
│ ├── layout.tsx
│ └── page.tsx
├── components
│ └── Navbar.tsx
├── theme
│ └── theme.ts
└── types7. Example Component
components/Navbar.tsx
import { AppBar, Toolbar, Typography } from "@mui/material";export default function Navbar() {
return (
<AppBar position="static">
<Toolbar>
<Typography variant="h6">
My App
</Typography>
</Toolbar>
</AppBar>
);
}✅ Benefits of this stack
- Next.js → SEO + fast rendering
- TypeScript → type safety
- MUI → ready UI components (buttons, forms, tables)
메타데이터
- post_id
- b7a0e3554d3f
- slug
- modern-react-app-next-js-typescript-material-ui-mui-b7a0e3554d3f
- url
- https://medium.com/@bansode.vijay1996/modern-react-app-next-js-typescript-material-ui-mui-b7a0e3554d3f
- canonical_url
- https://medium.com/@bansode.vijay1996/modern-react-app-next-js-typescript-material-ui-mui-b7a0e3554d3f
- author_url
- https://medium.com/@bansode.vijay1996
- status
- ok
- fetched_at
- 2026-06-13 12:55:53
