How to Create a Flask + Next.js Project

In this article, we will go through the steps to create a project using Flask as the backend and Next.js as the frontend. This combination of technologies allows for a powerful and dynamic web application.

Step 1: Setting up the Python Backend with Flask

First, we need to set up the backend of our project using Python and Flask. To do this, we can create a new directory for our project and set up a virtual environment using the following commands:

mkdir my_project
cd my_project
python -m venv venv
source venv/bin/activate
pip install flask
		

Once we have set up our virtual environment, we can create a new Python file for our Flask app. We can call it app.py and we can write a simple Flask app as follows:

from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return 'Hello from Flask!'

if __name__ == '__main__':
    app.run(debug=True)
		

With our Flask app set up, we can now run it using the following command:

python app.py
		

Our Python backend is now up and running. We can test it by visiting http://localhost:5000 in our web browser and we should see the message “Hello from Flask!”.

Step 2: Setting up the Frontend with Next.js and React

Now that we have our backend in place, we can set up our frontend using Next.js and React. We can start by creating a new directory for our frontend and initializing a new Next.js project using the following commands:

npx create-next-app my_frontend
cd my_frontend
		

Once our Next.js project is set up, we can start by creating a new page for our application. We can create a new file called index.js in the pages directory and write a simple React component as follows:

import React from 'react'

function Home() {
  return 
Hello from Next.js!
}

export default Home
		

With our frontend set up, we can now run our Next.js app using the following command:

npm run dev
		

Our Next.js app is now up and running. We can test it by visiting http://localhost:3000 in our web browser and we should see the message “Hello from Next.js!”.

Step 3: Connecting the Backend and Frontend

Finally, we need to connect our backend and frontend together. We can do this by making a request from our Next.js app to our Flask app using the fetch API. We can create a new file called api.js and make a simple GET request as follows:

export async function fetchData() {
  const response = await fetch('http://localhost:5000');
  const data = await response.json();
  return data;
}
		

With our backend and frontend connected, we can now use the data from our Flask app in our Next.js app and build a fully functional web application.

That’s it! We have now successfully created a project using Flask as the backend and Next.js as the frontend. This combination of technologies allows for a powerful and dynamic web application.