Skip to main content

v3.1.0 to v4.0.0

This guide helps you migrate your project from v3.1.0 to v4.0.0. We have upgraded the template to Next.js 15 and Material-UI 6, and there are some important changes that you need to incorporate in your project.

Before proceeding, it is strongly recommended to compare your package.json with the new package.json to ensure all dependencies are updated.

For additional details on updating the template, please refer to the How to update this template? guide.

Next.js v15 Changes​

We have upgraded to Next.js 15, which introduces some important changes. Please follow the official migration guide for detailed information. Below are some of the changes that we have made in our template:

  1. As cookies, headers, params etc are now Asynchronous, you will need to update how they are handled, For example:

    // Before
    const mode = getServerMode()

    // After
    const mode = await getServerMode()

  2. Renamed next.config.mjs to next.config.ts or next.config.js.

  3. Update tsconfig.json

    - "next.config.mjs"
    + "next.config.ts" // for TypeScript
    + "next.config.js" // for JavaScript

MUI v6 Changes​

We have tried to mention the major changes related to Material-UI 6 in the template. Please follow the official migration guide for more information.

  1. The CssVarsProvider and extendTheme APIs are now stable. As part of this, we have removed Experimental_CssVarsProvider and experimental_extendTheme, and replaced them with the stable ThemeProvider and createTheme API.

  2. In MUI 6, the Grid component has been deprecated and replaced with Grid2. Update all instances of Grid to Grid2, and adjust the size prop accordingly.

    - import Grid from '@mui/material/Grid'
    + import Grid from '@mui/material/Grid2'
    - <Grid item xs={12} sm={6} md={3}>
    + <Grid size={{ xs: 12, sm: 6, md: 3 }}>

  3. Since the TextField component's InputProps prop and some other slot props are now deprecated, you should replace InputProps with slotProps and make the necessary adjustments. For more information, please refer to the TextField Props Migration Guide.

    - <TextField InputProps={{ startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}  />

    + <TextField slotProps={{ input: { startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}} />

  4. If you're using a CustomTextField component, you will need to update it to use slotProps instead of InputProps as shown in the previous step.

    - <CustomTextField InputProps={{ startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}  />

    + <CustomTextField slotProps={{ input: { startAdornment: (<InputAdornment position='start'><i className='tabler-search' /></InputAdornment>)}}} />
info

Please use the Compare Folders extension to compare the changes in the template and your project. As it is not possible to mention all the changes here, this extension will help you to find the changes easily.

Please check the how to update this template guide for more information.