How to Reuse CSS-in-JS code in Next.js Apps

dev

Next.js logo

Hey everyone, how are things going?

Today it's been day 32 since I started my 100 days of code challenge on Twitter.

As you may know I am writing an HTML form builder that will allow users to create HTML5 forms easily by adding, dragging and dropping, gracious, graceful Material-UI cards.

The frontend tech-stack in place is this one: React, Redux, Next.js and Material-UI. The source code of the app is available on GitHub.

Recently I came across the need to reuse a bunch of CSS-in-JS code in one single template for my Next.js pages to look all the same, which at this point are the following ones:

  • About
  • Terms of Use
  • Privacy Policy
  • Cookies Policy

Figure 1

Figure 1. Files in the /pages folder of my Next.js app

This time it seemed as if the best thing to do was to create a new folder named styles in the root directory to only add a pages.js file into it.

Figure 2

Figure 2. I added the styles/pages.js file
import { makeStyles } from '@material-ui/core/styles';

export default makeStyles((theme) => ({
  box: {
    padding: theme.spacing(2),
    margin: theme.spacing(2),
  },
  paper: {
    padding: theme.spacing(2),
    color: theme.palette.text.secondary,
  },
}));

With this basic set up ready all I had to do was to import the styles in the public, server-side rendered pages listed above.

As an example, here's how the code in pages/cookies-policy.js looks like after reusing the CSS-in-JS code:

import { Box, Container, Grid, Paper, Typography } from '@material-ui/core'
import MainNav from 'components/MainNav'
import Footer from 'components/Footer'
import Head from 'next/head'
import useStyles from '../styles/pages'

const CookiesPolicy = () => {
  const classes = useStyles()

  return <div>
    <Head>
      <title>HTML Form Builder | Cookies Policy</title>
    </Head>
    <MainNav />
    <Container maxWidth="lg">
      <Box className={classes.box}>
        <Typography variant="h4" component="h1" align="center" gutterBottom>
          Cookies Policy
        </Typography>
        <Typography variant="caption" component="p" align="center">
          Last Revised: February 18, 2021
        </Typography>
      </Box>
      <Grid container>
        <Grid item xs={12} sm={12} md={12}>
          <Paper className={classes.paper}>
            <Typography variant="p">
              Cookies? Mmm, they are delicious! This website does not collect personal data through third-party cookies.
            </Typography>
          </Paper>
        </Grid>
      </Grid>
    </Container>
    <Footer />
  </div>
}

export default CookiesPolicy

This way all Next.js pages look the same.

Figure 3

Figure 3. The About, Terms of Use, Privacy Policy, and Cookies Policy pages now they all look the same

I hope this tip will be helpful to your awesome React app too.

This is all for now, thanks for reading!

You may also be interested in...

Previous Post Next Post