Django NextJS App CSRF verification failed

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

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

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

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;


hello sir please reply

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.