Skip to content
Branch: master
Find file History
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
api/profiles Use `@now/node` helpers (#393) Jun 18, 2019
lib Add next-mysql example (#344) Apr 25, 2019
pages update protocol & host for now dev (#349) Apr 25, 2019
.gitignore fix charge.js typo and .nowignore (#394) Jun 18, 2019
.nowignore Add next-mysql example (#344) Apr 25, 2019
README.md Use `@now/node` helpers (#393) Jun 18, 2019
db.sql Add next-mysql example (#344) Apr 25, 2019
next.config.js Add next-mysql example (#344) Apr 25, 2019
now.json
package.json Add next-mysql example (#344) Apr 25, 2019

README.md

Next.js + MySQL Example

This directory is an example of a Next.js app connected to a MySQL database using the @now/next and @now/node Builders.

Example Purpose

The main purpose of this example is to highlight how MySQL can be used successfully in a serverless architecture. For a more detailed explanation of Next.js you can visit the documentation or view other examples in this repository such as a Next.js only build.

Directory Contents

This example consists of three directories:

  • /api - which contains the serverless lambda functions to be deployed inside /profiles
  • /lib - which is where the database connection helper is stored
  • /pages - where the data received is displayed by Next.js

The example includes a now.json file, used to configure your build when deploying to Now, and a .nowignore file, used to prevent uploading unnecessary source paths to Now, keeping deployment times short.

Also included is a db.sql file, which has the example data and SQL commands, this can be used to replicate this example.

Lastly, the next.config.js is used to tell Next.js that we are targeting a serverless environment.

How Serverless MySQL Works

Serverless functions will create multiple database connections as traffic increases and therefore all available connections can be consumed quickly, blocking access for others. This example resolves this issue by utilizing Jeremy Daly's MySQL wrapper - serverless-mysql.

The wrapper provides basic but important functionality that allows connections to be monitored, limited, retried and closed. This is vital for making serverless MySQL work and is explored further in db.js below:

const mysql = require('serverless-mysql');

const db = mysql({
  config: {
    host: process.env.MYSQL_HOST,
    database: process.env.MYSQL_DATABASE,
    user: process.env.MYSQL_USER,
    password: process.env.MYSQL_PASSWORD
  }
});

exports.query = async query => {
  try {
    const results = await db.query(query);
    await db.end();
    return results;
  } catch (error) {
    return { error };
  }
};

db.js performs the following actions:

  • Requires the serverless-mysql package
  • Creates a connection to the database using pre-defined environment variables
  • Exports a query helper that enforces the db.end() method

The most important part, in the serverless context, is db.end().

By using await db.end(), serverless-mysql ensures the connection is closed before sending the response to the client.

As a result, it ensures that concurrent MySQL connections do not reach their limit, allowing new connections to be created when required.

Next, let's look at /api/profiles/profile.js to see what a serverless MySQL query looks like:

const db = require('../../lib/db');
const sql = require('sql-template-strings');

module.exports = async (req, res) => {
  const [profile] = await db.query(sql`
    SELECT *
    FROM profiles
    WHERE id = ${req.query.id}
  `);
  res.status(200).json({ profile });
};

index.js performs the following actions:

  • Requires the database connector found in /lib, along with the url and sql-template-strings modules
  • Parses the request url to get the query parameters
  • Sends a query to the database to get a single profile
  • Sends the profile to the client as a response

As you can see, once the connection is created, querying the database is straightforward and easy to follow.

Using this format, you can create whatever queries you require simply by changing the parameter passed to db.query() - simple but incredibly effective, not to mention performant.

Running this Example

To deploy your own version of this example follow the below steps:

  • Create a remote MySQL database noting down the host, username, password and database name
  • Clone this repository using and cd into it
  • Install the dependencies with yarn
  • Add the environment variables from the first step using now secrets add <ENV_NAME> <VALUE> - the variable names can be found in now.json
  • Populate your MySQL database with the data found in db.sql using your preferred method
  • Deploy your application using a single command - now

Congratulations, you've just deployed your very own Next.js + MySQL application!

Resources

For more information on how you can deploy your own Next.js + MySQL applications, see the following resources:

You can’t perform that action at this time.