DEV Community

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

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, ...
Collapse
 
santosh_barai_6371510457d profile image
Santosh Barai

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

Collapse
 
koladev profile image
Mangabo Kolawole

glad it helped

Collapse
 
jtirelli profile image
John Tirelli

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.

Collapse
 
koladev profile image
Mangabo Kolawole • 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 :)

Collapse
 
mavis_15 profile image
Irikefe Ikie

Personally, to me, there are 2 good reasons:

  1. Django is secure and scalable.
  2. Next js for the frontend can be hosted on say, Vercel, and updated from the github account seamlessly.
Collapse
 
stevenmodimo profile image
StevenMODIMO • 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

Collapse
 
israelbo17 profile image
Israel Boluwatife

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

Collapse
 
koladev profile image
Mangabo Kolawole

Thank you @israelbo17

Collapse
 
nellysunday profile image
Sunday

Nice one

Collapse
 
koladev profile image
Mangabo Kolawole

thanks

Collapse
 
taliastorymaker profile image
Talia

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

Collapse
 
koladev profile image
Mangabo Kolawole

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

Collapse
 
ammarhairihd profile image
AMMAR HAIRI

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

Collapse
 
koladev profile image
Mangabo Kolawole

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

Collapse
 
volodyslav profile image
Volodyslav

Great explanation!

Collapse
 
koladev profile image
Mangabo Kolawole

thank you!

Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan • 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().

Collapse
 
koladev profile image
Mangabo Kolawole

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...

Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan

Thank You.

Collapse
 
rushabht3 profile image
Rushabh Trivedi

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...?

Collapse
 
koladev profile image
Mangabo Kolawole

./ 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...

Collapse
 
tombohub profile image
tombohub

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

Collapse
 
koladev profile image
Mangabo Kolawole

a typo. corrected

Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan

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')"

Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan • Edited

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

const unwrappedParams = use(params);
const menuId = unwrappedParams.menuId;
Enter fullscreen mode Exit fullscreen mode
  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]);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan

The last image (before conclusion) no longer exists.

Collapse
 
koladev profile image
Mangabo Kolawole

corrected

Collapse
 
stevenmodimo profile image
StevenMODIMO • Edited

Both are full-stack frameworks.

  1. NextJS alone can accomplish this project.
  2. Django as well can alone accomplish this project.
  • Why use two frameworks that basically do the same thing ?
Collapse
 
koladev profile image
Mangabo Kolawole

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?

Collapse
 
armaanchaand profile image
CHAAND

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.

Collapse
 
anjanesh profile image
Anjanesh Lekshminarayanan

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

Collapse
 
koladev profile image
Mangabo Kolawole