Frontend Serverless with React and GraphQL
Start at the beginning and work your way through this project. The code for each step as well as the finished project can be found in the Github repository.
7. Add Layout
Objective: Add the Ant Design Layout.
Ant Design has a set of components that make creating a typical website layout with a navbar, footer and content section a snap. In this step, we will import the <Layout>
component from Ant Design for setting the main layout and we will also use the <Content>
section as a wrapper for our page content.
Update our <MainLayout>
component to import the <Layout>
from ant design and <Content>
from the Layout component. Wrap both around the children
prop that previously wrote in our component. When you save the page, you should see a slight styling change in how the page renders, in particular the background color that will indicate that this is properly working.
components/layout/MainLayout.tsx
import { ThemeProvider } from 'styled-components';import { Component, ReactNode } from 'react';import { theme } from '../../utils/theme';import { GlobalStyle } from '../../utils/globalStyle';import Head from 'next/head';import { Layout } from 'antd';const { Content } = Layout;const MainHead = ({ title }: { title: string }) => (<Head><title>{title}</title><meta charSet="utf-8" /><meta name="viewport" content="initial-scale=1.0, width=device-width" /><metaname="description"content="A recipe discovery app powered by Next.js."/><meta name="author" content="codemochi" /><meta name="keyword" content="next, react, typescript, js" /><meta property="og:type" content="website" /><meta property="og:title" content={title} /><meta property="og:url" content="https://next-chop.codemochi.com" /><meta property="og:image" content="/logo.svg" /><metaproperty="og:description"content="A recipe discovery app powered by Next.js."/><linkrel="apple-touch-icon"sizes="180x180"href="/favicon/apple-touch-icon.png"/><linkrel="icon"sizes="32x32"type="image/png"href="/favicon/favicon-32x32.png"/><linkrel="icon"sizes="16x16"type="image/png"href="/favicon/favicon-16x16.png"/><link rel="manifest" href="/favicon/site.webmanifest" /></Head>);type Props = {children: ReactNode;title?: string;};export class MainLayout extends Component<Props> {render() {const { title, children } = this.props;return (<ThemeProvider theme={theme}><MainHead title={title} /><GlobalStyle /><Layout><Content>{children}</Content></Layout></ThemeProvider>);}}