Build a Blog with React and Next.js

Close

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:

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:

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>  );}

Community Questions