Next.js - Template Repository
Use this repository to follow along with the Creating your own Web App series.
Using this template
button, follow the steps to clone this template giving the repository a name of your choice.
- Click on the-
download the ZIP file ( → Download ZIP)
If the above button doesn't appear, then
npm install
command in the root directory of the project to install all dependencies of the project.
- Run the npm run dev
command from the root directory of the project.
- Start the Next.js App using the Index
Steps to Recreate this template
To recreate this template you can follow the steps below:
Creating your first Next.js app
Create your first Next.js app by running the following command:
npx create-next-app <app-name>
Replacing <app-name>
with the name of your app.
Choosing how to style your app
Material-UI
Material-UI is a React UI library for building user interfaces.
You can add Material-UI and Material Icons to your project by running the following command:
npm install @mui/material @emotion/react @emotion/styled @mui/icons-material
Tailwind CSS
Tailwind CSS is a utility-first CSS framework for styled-components.
To add Tailwind CSS to your project, run the following command:
npm install -D tailwindcss postcss autoprefixer
Initialize Tailwind CSS by running the following command:
npx tailwindcss init -p
Initializing tailwindcss will create a tailwind.config.js
file in your project. By default, Tailwind CSS will watch only .html
files in your project.
You can extend the default configuration by adding your own customizations to the tailwind.config.js
file and editing the content
property like so:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
};
Finally, add the following Taiwind directives to your CSS file:
@tailwind base;
@tailwind components;
@tailwind utilities;
Now for tailwind to work nicely with Material UI, we need to perform a few extra steps as by default some style properties of both fight for precedence causeing unwanted results.
An indepth interoperability guide can be found here.
Add the following as the corePlugins
property of your tailwind.config.js
file:
module.exports{
corePlugins: {
preflight: false,
},
}
Add the important option, using the id of your app wrapper. For example, #__next
for Next.js:
module.exports{
important: "#__next",
}
As a final step, we need to fix the CSS injection order.
Most CSS-in-JS solutions inject their styles at the bottom of the HTML <head>
tag, which gives MUI precedence over Tailwind CSS.
To reduce the need for the important property, you need to change the CSS injection order.
Here's how it can be done in MUI by editing the <App>
component in pages/_app.js
:
import "../styles/globals.css";
import { StyledEngineProvider } from "@mui/material/styles";
function MyApp({ Component, pageProps }) {
return (
<StyledEngineProvider injectFirst>
<Component {...pageProps} />
</StyledEngineProvider>
);
}
export default MyApp;