/nextjs-template

Template Repository for the Next.js Series

Primary LanguageJavaScriptMIT LicenseMIT

Next.js - Template Repository

Use this repository to follow along with the Creating your own Web App series.

Using this template

- Click on the Use This Template button, follow the steps to clone this template giving the repository a name of your choice.

- Run the npm install command in the root directory of the project to install all dependencies of the project.

- Start the Next.js App using the npm run dev command from the root directory of the project.

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:

./styles/globals.css:

@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;