Build a Blog with React and Next.js
Adding Static Assets
A public directory is used for static assets such as icons, robots.txt or any other non-changing files. You could add your own files or copy favicon.ico and the images subdirectory from the starter project repository.
Creating a Template
Next.js uses React components to implement templating. You’ll be adding several files, so it’s best to stop the Next.js server using Ctrl | Cmd + C.
Create a new components folder, then add layouts.js to define a new <Layout> component:
Code snippet
import Header from './header';import Footer from './footer';
export default function Layout({ children, hero }) { return ( <> <Header hero={ hero } /> <main>{ children }</main> <Footer /> </> );}Any page using this component will pass a props object which includes the content as a children value. <Layout> references two further components.
Firstly, it references <Header> in component/header.js, which renders a <header> containing a home page link, inline SVG logo, and a hero image that defaults to /images/orb.jpg if not defined:
Code snippet
import Link from 'next/link';
export default function Header({ hero }) { hero = '/images/' + (hero || 'orb.jpg');
return ( <header> <p className="logo"> <Link href="/"><a> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" width="50" height="50"> <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z"></path> </svg> Next.js starter </a></Link> </p>
<figure> <img src={ hero } width="400" height="300" alt="decoration" /> </figure> </header> );}