Our community is looking for talented writers who are passionate about our ecosystem (jamstack, open-source, javascript) and willing to share their knowledge/experiences through our Write for the community program.

Now Featuring React Hooks!

Updated April 2020

This is the version of the updated hooks of the previous tutorial, written with the class based React

This tutorial will walk you through how to use Next.js (React 16.8 w/ hooks) to power your UI, complete with GraphQL, Stripe, Strapi, and React Context to develop a full-stack application complete with the powerful Strapi (Headless CMS) powering the backend.

Get ready to develop a online food ordering app, more info on the tech stack here: Next.js (React), GraphQL, Stripe and Strapi! From signup to order, you are going to let users discover restaurants, dishes and order meals.

Your app will be complete with user login, registration, authentication, image upload, restaurant creation, dish creation, cart functionality, and stripe order integration.

The demo of the final result should make you hungry:

Note: the source code is available on GitHub.

Screenshots of final product:

Strapi:

Strapi is the most advanced open-source Node.js Headless Content Management System used to build scalable, secure, production ready API's quickly and efficiently saving developers countless hours of development.

With its extensible plugin system, it provides a large set of built-in features: Admin Panel, Authentication & Permissions management, Content Management, API Generator, etc. Unlike an online CMS, Strapi is 100% open-source (take a look at the GitHub repository), which means:

• Strapi is completely free.
• You can host it on your own servers, so you own the data.
• It is entirely customizable and extensible, thanks to the plugin system.

Next.js:

Next is a lightweight development framework to create server-rendered applications in React. Next.js will take care of the heavy lifting of the application build such as code splitting, HMR (hot module replacement) SSR (server-side rendering) and allow us to focus on writing the code, not our build config. No more configuration and build tinkering.

React:

React is one of the most popular front-end Javascript frameworks, developed by Facebook and used by countless tech companies including Netflix, Airbnb, and Github to build applications. React is a declarative library that makes it easy to create interactive user interfaces, keeping the code base organized through its component-based architecture.

GraphQL:

GraphQL is a query language also developed by Facebook to allow the front end of an application to easily query an application's API. Each query requests only the data needed to be rendered by the current view. This allows the developer to craft a great user experience across multiple devices and screen sizes.

Stripe:

Stripe is one of (if not the largest) payment processors for applications today. Stripe has developed the tools and SDKs to allow developers to craft and integrate secure, compliant payment processing into any app with ease.

Table of contents

• 🏗️ Setup (part 1) - current
• 🏠 Restaurants (part 2)
• 🍔 Dishes (part 3)
• 🔐 Authentication (part 4)
• 🛒 Shopping Card (part 5)
• 💵 Order and Checkout (part 6)
• 🚀 Bonus: Deploy (part 7)

🏗️ Setup

Next

To set up Next.js](https://strapi.io/integrations/nextjs-cms) we will need an empty directory to install the library and host our project root.

We will split our project into two parts, one for the front end (Next.js code) and one for the backend (Strapi code).

note: I am using the current versions of all packages as of the time of writing May 2020 Locking these versions will ensure compatibility in the future. Should you use the current versions of these packages, you may need to update the code according to the documentation of the appropriate package. Upgrade packages at your own will.

Create your project folders and install the current versions of next 9.4.0, react 16.13.1, and react-dom 16.13.1

1
2
3
4
5
6
$ mkdir next-react-hooks-strapi-food-delivery
$ cd next-react-hooks-strapi-food-delivery
$ mkdir frontend
$ cd frontend

$ yarn add next@9.4.0 react@16.13.1 react-dom@16.13.1

note: I am using yarn as my package manager, you can also use npm and execute npm install next@9.4.0 react@16.13.1 react-dom@16.13.1 yarn and npm are interchangeable.

Add the following to your package.json file after your dependencies:

1
2
3
4
5
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}

So that your file looks like this:

1
2
3
4
5
6
7
8
9
10
11
12
{
  "dependencies": {
    "next": "9.4.0",
    "react": "16.13.1",
    "react-dom": "16.13.0"
  },
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

Be sure to create a .gitignore in the project root and add .next and node_modules directories to it:

1
touch .gitignore

1
2
3
/* .gitignore */
node_modules
.next

First things first, let's set up our environment variables to avoid hard coding our API URL and having to update on every deployment.

1
$ touch .env.development

Path: /env.development

1
NEXT_PUBLIC_API_URL='http://localhost:1337'

Next.js is built to handle any routing for us and uses the files in the /pages directory as the routes for the application. To set up a route simply creates the /pages directory and add an index.js file with:

1
2
3
mkdir pages
cd pages
touch index.js

Now that we have our main route (index.js), this will map to the root ('/') (i.e. www.yourapp.com) of your application. To test this you can insert the following into the index.js file:

1
2
/* /pages/index.js */
export default () => <div>Welcome to next.js!</div>

Start the local dev server from the /frontend folder in a 2nd terminal window using:

1
$ yarn dev

Your application should now be visible at http://localhost:3000.

Adding Bootstrap

For this tutorial, we will use react-strap to implement Bootstrap 4 into our application. We will import our styles and CSS directly into the header by importing from the hosted CDN.

First, install Reactstrap:

1
$ yarn add reactstrap

reactstrap is a front-end library to easily create Bootstrap components and styling. This will take care of the heavy lifting on the front end.

To import the CSS and share a Layout component across all our pages we will use a custom _app.js file inside the pages directory.

This file will serve to override the default App.js used by Next and be rendered on each page, allowing us to set and manage global styles and shared components in one place of the application.

You can read more about the _app.js handling here: https://nextjs.org/docs/advanced-features/custom-app

This will allow us the ability to import a <Head> component and globally set the stylesheet inside the header.

1
$ touch _app.js

Path: /frontend/pages/_app.js

Now if we add in reactstrap components inside of index.js we should see the bootstrap styling applied once the page refreshes automatically.

Path: /frontend/pages/index.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/* pages/index.js */
import { Button, Alert } from "reactstrap";

export default () => {  
  return (
    <div>
      <div>
        <Alert color="primary">
          Hello Project is strapi-next with Bootstrap
        </Alert>
        &nbsp; <Button color="primary">Hello from nextjs</Button>
      </div>
    </div>
  );
};

Restart your server to apply the new changes if you do not see the components listed below.

Designing the page

Now that we have Bootstrap running inside of our Next project, we can begin to style the shared frontend components like the navbar.

First, create a folder to store our components and create our layout component:

1
2
3
4
$ cd ..
$ mkdir components
$ cd components
$ touch Layout.js

Next uses the <Link> component to perform the client-side routing between pages. The Link component is the next component and can accept any HTML element that has an onClick handler as a child component (<a>,<button>,<div> etc.).

To style our navbar we can use the built-in CSS in JS syntax <style jsx> shipped by default with next.

Inserting CSS in JS as in next is as easy as:

1
2
3
4
<style jsx> {`
  a { color: yellow }
`}
</style>

This allows us to scope CSS to the components the style tag is located in. You can also pass in the global option to set a global style across the project: <style jsx global> this would set styling across pages and components for all elements that match the CSS selector.

You can read more on CSS in JS in the Next documents here.

Open the Layout.js file and create the shared layout components and insert the Stripe script (for later) as follows:

Path: /frontend/components/Layout.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/* /components/Layout.js */

import React from "react";
import Head from "next/head";
import Link from "next/link";

import { Container, Nav, NavItem } from "reactstrap";

export default function Layout(props) {
  const title = "Welcome to Nextjs";
  return (
    <div>
      <Head>
        <title>{title}</title>
        <meta charSet="utf-8" />
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
          integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
          crossOrigin="anonymous"
        />
        <script src="https://js.stripe.com/v3" />
      </Head>
      <header>
        <style jsx>
          {`
            a {
              color: white;
            }
          `}
        </style>
        <Nav className="navbar navbar-dark bg-dark">
          <NavItem>
            <Link href="/">
              <a className="navbar-brand">Home</a>
            </Link>
          </NavItem>

          <NavItem className="ml-auto">
            <Link href="/login">
              <a className="nav-link">Sign In</a>
            </Link>
          </NavItem>

          <NavItem>
            <Link href="/register">
              <a className="nav-link"> Sign Up</a>
            </Link>
          </NavItem>
        </Nav>
      </header>
      <Container>{props.children}</Container>
    </div>
  );
}

Edit the _app.js file to use the new Layout component across the application:

Path: /frontend/pages/_app.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/* _app.js */
import React from "react";
import App from "next/app";
import Head from "next/head";
import Layout from "../components/Layout";
export default class MyApp extends App {
  render() {
    const { Component, pageProps } = this.props;
    return (
      <>
        <Head>
          <link
            rel="stylesheet"
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossOrigin="anonymous"
          />
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </>
    );
  }
}

You should now have a shared header bar across all your pages:

We will create two additional pages to allow users to sign in and sign up at /login and /register respectively.

You will need to create the corresponding files inside the /pages directory for next to recognize the routes.

1
2
3
4
$ cd ..
$ cd pages

$ touch login.js register.js

Populate the files with the following code that we will come back to once our Strapi server is set up.

Path: /frontend/pages/register.js

1
2
3
4
5
/* pages/register.js */

export default () => {
  return <h1>Sign Up</h1>;
};

Path: /frontend/pages/login.js

1
2
3
4
5
/* pages/login.js */

export default () => {
  return <h1>Sign In</h1>;
};

You should now see the routes at http://localhost:3000/login and http://localhost:3000/register

Install MongoDB

We will be using Community Server from MongoDB for our database for this tutorial. If you choose to use a SQL-based database like PostgreSQL, your implementation will be different and need to be adapted to suit a relational DB.

Mac installation:

1
2
$ brew tap mongodb/brew
$ brew install mongodb-community@4.2

If you are on a mac and want to install manually (brew is recommended though) Mongo Mac

You will need to start the mongo server on your local machine.

On Mac, start the mongo server by running:

1
$ brew services start mongodb-community@4.2

Install Strapi

Having a frontend is good, but your app obviously needs a backend to manage users, restaurants, dishes and orders. To make the magic happen, let's create a Strapi API.

Requirements: please make sure to use version >=Node 9 and have either MongoDB, Postgres or MySQL installed and running on your machine.

Create Strapi server

Install yarn here if you do not have it:

Go back to the root of your project and create a folder called backend & install strapi with:

1
2
3
$ cd ..
$ cd ..
$ yarn create strapi-app backend

You will need to do a manual install of Strapi (not quickstart) in order to use MongoDB.

Use your down arrow key and select Custom (manual settings) and press enter:

Select mongo from the list with the arrow keys and enter.

Press enter through all the settings to select the default, should look like:

Once all the Strapi dependencies are installed navigate to the backend folder and run yarn develop:

1
2
$ cd backend
$ yarn develop

Starting now, you should be able to visit the admin panel of your project: http://localhost:1337/admin.

Full Strapi Mongo instructions here: https://strapi.io/documentation/3.0.0-beta.x/guides/databases.html#sqlite-installation

To start your Strapi server in the future, navigate to the backend folder and run yarn develop

Create your first User

Add your first user from the registration page.

Good job, you successfully set up both Next.js and Strapi projects! 🎉

🏠 In the next section, you will learn how to display the list of restaurants: https://strapi.io/blog/nextjs-react-hooks-strapi-restaurants-2.

Please note: Since we initially published this blog post, we released new versions of Strapi and tutorials may be outdated. Sorry for the inconvenience if it's the case. Please help us by reporting it here.

Get started with Strapi by creating a project using a starter or trying our live demo. Also, consult our forum if you have any questions. We will be there to help you.