2/ Next + NextAuth + Strapi: setting up our project

We need to do some installing and configuring before we can start. The endpoint of the setup code can be seen on github (branch setup).

1. Next

Start by installing Next in a folder frontend. Run

npx create-next-app@latest

In the setup options, choose TypeScript, src folder, app router and Tailwind.

Once installed, we clean out most of the boilerplate so we can start with an empty project.

2. Strapi

Quick installation of Strapi. If you like like to read more about it, check out the Strapi quickstart guide. Let's install Strapi in a folder backend:

npx create-strapi-app@latest backend --quickstart --ts

The --quickstart flag means that Strapi will setup a SQLite database for you. This is completely invisible and you don't ever have to worry about this database (in dev mode). The --ts adds TypeScript support.

I named my project backend and chose Quickstart as installation type.

Once the installation is complete, Strapi will automatically start running, open up http://localhost:1337/admin/ and ask to create an account. This is the main Strapi administrator account so don't forget these credentials. It's all local so you don't have to worry.

And we are done with Strapi for now. We now have Next in our frontend folder and Strapi in our backend folder.

3. Setup an email provider in Strapi with nodemailer and Brevo

The default email plugin in Strapi is based on Sendmail. This may work in a development environment but is not very reliably in production. (As the Strapi docs themselves say.)

So, we are going to use a different plugin: provider-email-nodemailer with an external provider (Brevo, used to be called SendinBlue). Note, there is a specific Strapi plugin for Brevo. But using Nodemailer is an easier setup because we use SMTP.

Start by creating a free account (no credit card required) with Brevo. It allows for 300 free emails per day. This should be sufficient for dev purposes. Create a SMTP key. Then take the SMTP server, post, login and password and put them in the backend .env file:

# /backend/.env

SMTP_HOST=smtp-relay.brevo.com
SMTP_PORT=587
SMTP_USER=EDITME->someusername
SMTP_PASS=EDITME->somepassword
SMTP_DEFAULT_FROM=EDITME->someEmail
SMTP_DEFAULT_REPLYTO=EDITME->someEmail

The email plugin allows you to send an email from inside Strapi, f.e. from inside a controller or service. To ensure that there is always a from and replyto value in these emails, we set defaults in the config (see below) and we declare them here as: SMTP_DEFAULT_FROM and SMTP_DEFAULT_REPLYTO.

Next, we are going to install the Strapi plugin provider-email-nodemailer. In the backend (Strapi) folder, run:

npm i @strapi/provider-email-nodemailer

Sadly there are some vulnerabilities:

17 vulnerabilities (3 moderate, 14 high)

But at 05/03/2024 the plugin was last updated 6 days ago. So, it should be fine.

Next, we need to active and configure this plugin. Add these settings:

// backend/config/plugins.js

module.exports = ({ env }) => ({
  email: {
    config: {
      provider: 'nodemailer',
      providerOptions: {
        host: env('SMTP_HOST'),
        port: env('SMTP_PORT'),
        auth: {
          user: env('SMTP_USER'),
          pass: env('SMTP_PASS'),
        },
        // ... any custom nodemailer options
      },
      settings: {
        defaultFrom: env('SMTP_DEFAULT_FROM'),
        defaultReplyTo: env('SMTP_DEFAULT_REPLYTO'),
      },
    },
  },
});

Test if everything works. Start up strapi and go to the admin panel: http://localhost:1337/admin. Navigate to: settings > email plugin > configuration. Find the box Test email delivery, enter an email (you own) and hit send. This should send an email if you correctly followed the steps above.

Some tips if it failed:

• Make sure you added the env vars in the backend!
• Make sure you correctly spelled all vars in both .env and config/plugins.js.
• Read the error message in your backend terminal.

Source, most of the info in this section comes from this article: https://antonioufano.com/articles/easily-send-emails-in-strapi-with-any-provider/.

One last note: Brevo provides a nice dashboard with delivery stats and logs where you can review your sent mails.

4. Google OAuth

When you build a project that allows users to sign in with a Google account, you need to create an OAuth2.0 client on the Google cloud platform. This client will provide you with a client ID and a client secret that you will need later on when configuring NextAuth.

This Youtube video walks you through the entire process. The relevant part is from 3:28 - 6:00. As a sidenote, this is a video from a Youtube Channel Sakura Dev that has a lot of information about NextAuth. So you may want to bookmark it.

Steps:

1. Go to https://console.cloud.google.com/
2. Create credentials OAuth client ID for a web application
3. Fill in a name (f.e. test project), origins (http://localhost:3000) and callback url (http://localhost:3000/api/auth/callback/google).
4. Take the client ID and secret and put them into a .env.local in the root of out frontend folder:

# .env.local

GOOGLE_CLIENT_ID=MYGOOGLECLIENTID
GOOGLE_CLIENT_SECRET=MYGOOGLECLIENTSECRET

Carefull, this is confidential information. Do not push this to a git repo! Also, don't worry if you don't know what the callback url is, this is just a setup. It will link your frontend Next to the Google provider.

5. Project structure

We now have 2 folders:

• frontend for Next
• backend for Strapi

I added a workspace file in each folder. This allows you to easily have 2 instances of VS Code open for each folder. I added a different background colors for each folder to easily know if you're in the front or backend and also hid the node_modules folder.

6. Some components and styling

Before we get started, we add a couple of components and set some basic styles. We are going to keep the styling as basic a possible as this is not a UX article.

In our root layout.tsx we added a <NavBar /> component that - for now - holds a single link to the home page.

export default async function NavBar() {
  return (
    <nav className='flex gap-4 items-center my-4 p-4 bg-zinc-100 rounded-sm'>
      <Link href='/' className='mr-auto'>
        home
      </Link>
    </nav>
  );
}

Next steps

With this, we end the setup. In the next chapter we will be starting with NextAuth.

If you want to support my writing, you can donate with paypal.