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" />
<meta
name="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" />
<meta
property="og:description"
content="A recipe discovery app powered by Next.js."
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
sizes="32x32"
type="image/png"
href="/favicon/favicon-32x32.png"
/>
<link
rel="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>
);
}
}