how to connect flask with nextjs and deploy on Heroku

#Nextjs #Flask #Heroku #python #Javascript

I was searching for a basic Nextjs and flask app on Heroku and can’t find anything on google so I thought why not write it myself and here I am doing it. In this tutorial, you are going to be taken through the easy steps you need to take to connect your Flask backend to a NextJs frontend.

Prerequisite

Beginner-level understanding of the flask framework.
Familiarity with the basics of NextJs.

This blog believes that you already have NextJs and flask apps and we will be connecting them and then you can deploy them on Heroku. You can check out my Github repo if you do not already have the app.

Your folder structure should currently look like 👇

Step 1.

In the package.json file of your nextjs app replace the code with below-written code from:

"scripts": {  
 "build": "next build "  
}

to:

"scripts": {  
  "build": "next build && next export"  
}

“next export” allows you to export your Next.js application to static HTML, which can be run standalone without the need of a Node.js server.

package.json

Step 2.

In the next.config.js file add the following code:

module.exports = {  
  images: {  
    loader: 'akamai',  
    path: '/',  
  },  
}

Step 3.

Run the following command in the frontend folder:

npm run build

The output will be generated in the /frontend/out folder. “next export” builds an HTML version of your app. During the next build, getStaticProps and getStaticPaths will generate an HTML file for each page in your page's directory (or more for dynamic routes). Then, “next export” will copy the already exported files into the correct directory. getInitialProps will generate the HTML files during next export instead of next build.

Step 4.

Make the following changes in the app.py file of the flask app:

app = Flask(__name__, static_url_path='/', static_folder='./frontend/out')

Step 5.

Add the routes in app.py :

@app.route("/")  
def index():  
    return app.send_static_file('index.html')

@app.errorhandler(404)  
def not_found(err):  
    return app.send_static_file('404.html')

It looks for HTML pages generated in the step 3 command in the out/ directory in Step 3.

Step 6.

Remove the following from the .gitignore file:

/build  
/.next/  
/out/  
.next

.gitignore

Step 7.

Make sure to add gunicorn in your requirements.txt file.

requirements.txt

Step 8.

Create Procfile in the root directory and add the following to it:

web:  gunicorn app:app

Step 9.

Add a favicon.ico file in /frontend/out/ folder to display the icon for your website.

Step 10.

Push your code to Heroku

Final website

Voila!! you have successfully connected your flask backend to your Nextjs frontend. Now I am sure you can build small API endpoints in your flask backend and call the endpoints from your Nextjs frontend.

If you have any questions, feel free to drop them as a comment or send me a message on Linkedin or Twitter and I’ll ensure I respond as quickly as I can.

Steps to Deploy a NextJs and Flask on Heroku

Table of contents