How can I use Python and JavaScript in the same application?

Building a hybrid application combining the powers of JavaScript and Python is a great way to leverage the strengths of both languages. This guide will introduce you to a Next.js + Python app, where we use Next.js for the frontend and Flask for the backend API. The benefit of this arrangement is that it allows us to harness the power of Python's extensive AI libraries on the backend while providing a dynamic, responsive frontend with Next.js.

Architecture Overview

In this hybrid application, the Python/Flask server is integrated into the Next.js app under the /api/ route. This is achieved by using next.config.js rewrites to route any request to /api/:path* to the Flask API, which is hosted in the /api folder. On localhost, the rewrite directs to port 127.0.0.1:5328 (or any port that you want), where the Flask server runs. In a production setting, the Flask server is hosted as Python serverless functions on Vercel.

Option 1: Clone a Template

The easiest way to get this up and running is by cloning our Next.js Flask Starter template. You can do that by running the following command in your terminal:

npx create-next-app nextjs-flask --example "https://github.com/vercel/examples/tree/main/python/nextjs-flask"

Alternatively, if you prefer FastAPI, you can use the Next.js FastAPI Starter template instead:

npx create-next-app nextjs-fastapi --example "https://github.com/digitros/nextjs-fastapi"

Option 2: Start from Scratch

You can also build this application from scratch by following these steps:

Step 1: Setting up the Next.js Frontend

Start by bootstrapping your Next.js application with the following command:

npx create-next-app@latest

Create a next.config.js file in the root directory of your Next.js project. This file will handle routing requests to the Flask API.

Here's a sample next.config.js file:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'http://127.0.0.1:5328/:path*', // Proxy to Backend
      },
    ]
  },
}

In the next.config.js file, the rewrites() function routes any requests starting with /api/ to the Flask server running on http://127.0.0.1:5328.

Step 2: Setting up the Python/Flask Backend

Begin by installing Flask if you haven't done so already:

pip install flask

Now create a new Flask application in the /api directory. Here's a basic Flask app:

from flask import Flask
app = Flask(__name__)

@app.route('/api/hello', methods=['GET'])
def hello_world():
    return "Hello, World!"

if __name__ == '__main__':
    app.run(port=5328)

This simple Flask app listens for GET requests at the /api/hello endpoint and responds with "Hello, World!".

Step 3: Deploying to Vercel

In a production environment, the Flask server can be hosted as Python serverless functions on Vercel. To do this, you need to follow the instructions on the Vercel documentation on setting up Python serverless functions.

Once you've done that, any requests to /api/:path* in your Next.js app will be forwarded to your Flask server, whether it's running locally or on Vercel.

Conclusion

By integrating Flask with Next.js, you can use Python and JavaScript together in the same application. This hybrid approach is perfect for apps that require the power and flexibility of Python's backend capabilities (like AI libraries) with the dynamic frontend capabilities of a Next.js application.