Django NextJS App CSRF verification failed

Using Django Templates & Frontend
1

i am using {% csrf_token %} inside my form but this works on Django Html how to use csrf token in nextjs frontend

2

See the docs at AJAX for information and options on how to use the csrf_token within an AJAX request.

3

sir as you said then then i did google search

i follow this post but in this i am getting this error How to SOLVE this Error ???

Screenshot 2022-05-06 130638
Screenshot 2022-05-06 1306381488×751 83.7 KB

Here is my Codes

import Link from "next/link";
import Layout from "../components/layout/layout";
import Script from 'next/script'
import csrftoken from '../components/csrftoken'

function getCookie(name) {
    var cookieValue = null;
    if (document.cookie && document.cookie !== '') {
        var cookies = document.cookie.split(';');
        for (var i = 0; i < cookies.length; i++) {
            var cookie = jQuery.trim(cookies[i]);
            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                break;
            }
        }
    }
    return cookieValue;
}
var csrftoken = getCookie('csrftoken')

function Register() {

 
    return (
        <>
            <Layout>
                        <form method="post" >
                             <csrftoken />
                                  <div className="form-group">
                                      <input type="text" required="" value={name} className="form-control" name="username" placeholder="Full Name" />
                                            </div>
                                            <div className="form-group">
                                                <input type="email" required="" className="form-control" name="email" placeholder="Email" />
                                            </div>
                                            <div className="form-group">
                                                <input className="form-control" required="" type="password" name="password" placeholder="Password" />
                                            </div>
                                      
                                            <div className="login_footer form-group">
                                                <div className="chek-form">
                                                    <div className="custome-checkbox">
                                                        <input className="form-check-input" type="checkbox" name="checkbox" id="exampleCheckbox1" value="" />
                                                        <label className="form-check-label" htmlFor="exampleCheckbox1"><span>I agree to terms &amp; Policy.</span></label>
                                                    </div>
                                                </div>
                                                <a className="text-muted" href="#">Lean more</a>
                                            </div>
                                            <div className="form-group">
                                                <button type="submit" className="button button-contactForm btn-block">Submit &amp; Register</button>
                                            </div>
                                        </form>
 </Layout>
       
<Script type="text/jsx">
fetch(url, {
    credentials: 'include',
    method: 'POST',
    mode: 'same-origin',
    headers: {
      'Accept': 'application/json',
      'Content-Type': 'application/json',
      'X-CSRFToken': csrftoken
    },
    body: {}
   })
  
</Script>

        </>
    );

}

export default Register;
4

hello sir please reply

5

I don’t have any idea. This is outside Django - more of a NextJS issue. You might get more specific help from a NextJS support forum or mailing list.