Next.js Quick Start Guide

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.jsimport React from 'react';import {withRouter} from 'next/router';export default withRouter(({href, onClick, ...