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>
  );
}