DEV Community

Building a FullStack Application with Django, Django REST & Next.js

Mangabo Kolawole on January 26, 2024

Django and Nextjs are the one most used web frameworks for backend and frontend development. Django comes with a robust set of features, security, ...

Read full post

Santosh Barai • Aug 22

It is a very good article. It is very helfull for me. Thank you very much

Mangabo Kolawole • Nov 14

glad it helped

John Tirelli • Jan 27

I'll admit it, I skimmed most of this article, but that's only because I wanted to know why you would use both python and JavaScript instead of one or the other. Then I saw mention of node js for the frontend but I couldn't find where you used it (or how, bff?)

This seems like a good article to explore either framework, but I'm still curious:

One of the main benefits of node is you can have your backend and your frontend in a single language. Options also exist for Python. I'd like to know what made you decide to make this tradeoff.

I hope you don't mind the unsolicited feedback, but, answering the "why" of your article ahead of time gives me, the reader, assurance that the journey is one worth taking.

Mangabo Kolawole • Jan 27 • Edited

I will go with the reasons mentioned by @mavis_15 under your comment.

Regarding node, I was pointing out the Node version I am using on my machine for Next.js development with npm.

Regarding the preference for Django for backend development, I will just say it can depend on the type of application that we want to develop. For example, if I am building an event-driven application I believe that asynchronous pattern should be the heart of such applications, thus going with a backend in JavaScript will be very beneficial.

Python and Django are easy to understand and the ecosystem for web development is so rich, secure, robust, scalable, and understandable that I just prefer Python for non-asynchronous backends.

Now, it is true that Python handles asynchronous code and is quite good at it, but not like Javascript.

Thanks for the feedback :)

Irikefe Ikie • Jan 27

Personally, to me, there are 2 good reasons:

Django is secure and scalable.
Next js for the frontend can be hosted on say, Vercel, and updated from the github account seamlessly.

StevenMODIMO • Jan 28 • Edited

Django is secure and scalable.

So as NextJS

Next js for the frontend can be hosted on say, Vercel, and updated from the github account seamlessly.

So as Django.

Read: How to Host Django Project on Vercel

Israel Boluwatife • Jan 28

This is a very good article. Thank you so much Kola.
I hope to see more of your contents

Mangabo Kolawole • Jan 28

Thank you @israelbo17

Sunday • Jan 27

Nice one

Mangabo Kolawole • Jan 27

thanks

Talia • Jan 29

Seems like a fine article, but you said "In terms of styling, we’ll use Tailwind CSS" but then didn't?

Mangabo Kolawole • Jan 29

Oh, a mistake. I have corrected it. thank you for pointing it out

AMMAR HAIRI • Feb 19

A bit unclear, especially I don't know which directory to use in Terminal. However, I do appreciate

Mangabo Kolawole • Feb 20

thanks for the feedback. it will help me make the article better

Volodyslav • Jul 6

Great explanation!

Mangabo Kolawole • Jul 6

thank you!

Anjanesh Lekshminarayanan • Nov 14 • Edited

Im using Django 5.1 and NextJS 15.0.3. I am getting this when I click the edit button.

A param property was accessed directly with params.menuId. params is now a Promise and should be unwrapped with React.use() before accessing properties of the underlying params object. In this version of Next.js direct access to param properties is still supported to facilitate migration but in a future version you will be required to unwrap params with React.use().

Mangabo Kolawole • Nov 14

This version of the article is using Django 4 LTS and Next.js 14.

To resolve your issue, do as they suggest. Check this github.com/vercel/next.js/issues/7...

Anjanesh Lekshminarayanan • Nov 15

Thank You.

Rushabh Trivedi • May 7

where to add this file is unclear:
`# ./routers.py

from rest_framework import routers

from menu.viewsets import MenuViewSet

router = routers.SimpleRouter()

router.register(r'menu', MenuViewSet, basename="menu")

urlpatterns = router.urls`
can you help please and make change in the article too.

also to make clear could you add the app's file structure image as a whole which include the frontedn and the backedn also after writing the bakcned not sure where to add the frontend folder so may be that can be sorted by this as well...?

Mangabo Kolawole • May 12

./ means at the root of the project. I will modify the article to add this detail.

I will also add the image. In the meantime, please refer to the repo of the project. github.com/koladev32/django-api-ne...

tombohub • Jan 27

Django is not most used. Where did you get that info?

Mangabo Kolawole • Jan 27

a typo. corrected

Anjanesh Lekshminarayanan • Nov 15

We will deal with authentication and permissions in the next article
where is the next article on this ?

Mangabo Kolawole • Nov 16

dev.to/koladev/fullstack-nextjs-dj...

Anjanesh Lekshminarayanan • Nov 15

Now when I goto localhost:3000/update/4 the data doesn't show in the text box.
I get "Cannot read properties of null (reading 'memoizedState')"

Anjanesh Lekshminarayanan • Nov 15 • Edited

In frontend\src\app\update[menuId]\page.tsx :
In function const Page = ({ params }) :

const unwrappedParams = use(params);
const menuId = unwrappedParams.menuId;

  useEffect(() => {
    let mounted = true;

    const fetchData = async () => {
      try {
        setIsLoading(true);
        const data = await getMenu(menuId);
        if (mounted) {
          setFormData({ name: data.name, price: data.price });
        }
      } catch (err) {
        if (mounted) {
          setError(err.message);
        }
      } finally {
        if (mounted) {
          setIsLoading(false);
        }
      }
    };

    fetchData();

    return () => {
      mounted = false;
    };
  }, [menuId]);

Anjanesh Lekshminarayanan • Nov 13

The last image (before conclusion) no longer exists.

Mangabo Kolawole • Nov 14

corrected

StevenMODIMO • Jan 28 • Edited

Both are full-stack frameworks.

NextJS alone can accomplish this project.
Django as well can alone accomplish this project.

Why use two frameworks that basically do the same thing ?

Mangabo Kolawole • Jan 28

I will say it is more like preference and it is also about reliability.

Backend development with Next.js is recent while backend development with Django has many years of iterations, architectural changes, and maturity.

If I am looking to build a quick fullstack application, I will go with Next.js as I can have a reactive frontend and also an easy pluggable backend.

However, if the project is much more complex and requires certain tools that I can find in my environment, I will go with Django. For example, building a workflow engine can be done with Next.js, but you will find more reliable tools in the Python ecosystem for example. And if you are a Python dev, why not go with it?

CHAAND • Feb 11

Yes, you're right. If you've a project as simple as this one, then you don't have to use both the framework.
But, when your project goes bigger - which has many api endpoints for different clients (like a web client or mobile apps) then using this tech stack (NextJs and DRF) can be very helpful.