Next.js

Learning Next.js using this tutorial :

Getting started with Next.js

Client-Side History Support

when you click back, usually this is handled by next/link instead of being handled in the usual way location.history

Styling a component

a style={{ fontSize: 20 }}

<Link href="/about">
  <a style={{ fontSize: 20 }}>About Page</a>
</Link>

Higher Order Component (HOC)

A higher-order component (HOC) is an advanced technique in React for reusing component logic. HOCs are not part of the React API, per se. They are a pattern that emerges from React’s compositional nature.

Concretely, a higher-order component is a function that takes a component and returns a new component

Creating a component

import Link from 'next/link'

const linkStyle = { marginRight: 15 }

const ComponentName = () => (
    <div>
        <Link href="/">
          <a style={linkStyle}>Home</a>
        </Link>
        <Link href="/about">
          <a style={linkStyle}>About</a>
        </Link>
    </div>
)

export default Header