Adding styles to an application – CSS in JS

There are many ways a Next.js app can be styled.

The simplest way is to use inline styles. Obviously, this is the worst possible way, but we'll start small:

const selectedStyles = {
    fontWeight: 'bold'
};

const regularStyles = {
    fontWeight: 'normal'
};

const Btn = ({href, onClick, children, pathname}) => (
    <button style={pathname === href ? selectedStyles : regularStyles}}>
        {children}
    </button>
);

Obviously, this does not scale at all. Luckily, Next.js offers a technique called JSS (one of many ways to have CSS in JS), and JSS can be used straight inside JSX to define styles:

// components/button.js
import React from 'react';
import {withRouter} from 'next/router';

export default withRouter(({href, onClick, children, router}) => (
    <span>
        ...