Integration of Next.js 14 with Material-UI for Custom Layouts

Showcase how to use Material-UI components and customization options to create a professional and polished layout in a Next.js 14 application.

import * as React from 'react';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import Container from '@mui/material/Container';

// Create a theme instance.
const theme = createTheme({
  // Define your theme overrides here
  palette: {
    primary: {
      main: '#556cd6',
    },
    // ... add more overrides as needed
  },
});

function MyApp({ Component, pageProps }) {
  return (
    <ThemeProvider theme={theme}>
      {/* CssBaseline kickstarts an elegant, consistent, and simple baseline to build upon. */}
      <CssBaseline />
      {/* You can add a global layout here, like a header or footer that persists across pages */}
      <Container>
        {/* Here we place the page content */}
        <Component {...pageProps} />
      </Container>
    </ThemeProvider>
  );
}

export default MyApp;

This code snippet creates a custom Material-UI theme and wraps the Next.js application with a ThemeProvider. It also ensures a consistent baseline style with CssBaseline and encloses page content within a Container component. The theme object is where you customize Material-UI's default look to fit your design requirements.

import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Button from '@mui/material/Button';

function Header() {
  return (
    <AppBar position="static">
      <Toolbar>
        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
          Next.js 14 with Material-UI
        </Typography>
        <Button color="inherit">Login</Button>
      </Toolbar>
    </AppBar>
  );
}

export default Header;

This snippet creates a Header component using Material-UI's AppBar, Toolbar, Typography, and Button components. The AppBar is fixed at the top (static) and contains a title for the application as well as a login button aligned to the right.