next js material ui typescript
Install Next.js
npx create-next-app@latest
Install Material-UI
npm install @mui/material @emotion/react @emotion/styled
Install TypeScript
npm install --save-dev typescript @types/react @types/node
Configure TypeScript
Create a tsconfig.json
file in the root of your project with the following content:
{
"compilerOptions": {
"target": "ES5",
"lib": ["DOM", "ES2017"],
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"module": "ESNext",
"moduleResolution": "Node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve"
},
"include": ["next-env.d.ts", "/.ts", "/.tsx"],
"exclude": ["node_modules"]
}
Update Next.js Config
Create or update the next.config.js
file in the root of your project with the following content:
module.exports = {
webpack: (config) => {
config.resolve.fallback = { fs: false, module: false };
return config;
},
};
Create a Component
Create a TypeScript file (e.g., MyComponent.tsx
) and implement a Material-UI component using TypeScript.
import * as React from 'react';
import { Button } from '@mui/material';
export default function MyComponent() {
return <Button variant="contained">Hello World</Button>;
}
Use the Component
Use the TypeScript component in your Next.js pages or components.
import MyComponent from '../components/MyComponent';
export default function Home() {
return (
<div>
<h1>Welcome to Next.js with Material-UI and TypeScript</h1>
<MyComponent />
</div>
);
}