The problem:
django is unable to load css, svgs and other files from nextjs project

问题：django无法从nextjs项目加载css、svgs和其他文件

here is the error:

以下是错误：

Not Found: /_next/static/css/app/layout.css
Not Found: /vercel.svg
[28/Jul/2023 16:31:55] "GET /_next/static/css/app/layout.css?v=1690542114858 HTTP/1.1" 404 2541
Not Found: /_next/static/css/app/page.css
[28/Jul/2023 16:31:55] "GET /vercel.svg HTTP/1.1" 404 2462
[28/Jul/2023 16:31:55] "GET /_next/static/css/app/page.css?v=1690542114859 HTTP/1.1" 404 2535
Not Found: /_next/static/chunks/main-app.js
[28/Jul/2023 16:31:55] "GET /_next/static/chunks/main-app.js HTTP/1.1" 404 2525
Not Found: /next.svg
Not Found: /_next/static/chunks/webpack.js
[28/Jul/2023 16:31:55] "GET /next.svg HTTP/1.1" 404 2456
[28/Jul/2023 16:31:55] "GET /_next/static/chunks/webpack.js HTTP/1.1" 404 2522
Not Found: /_next/static/chunks/webpack.js
[28/Jul/2023 16:32:21] "GET /_next/static/chunks/webpack.js HTTP/1.1" 404 2522

So, i was trying to integrate django with nextjs, and after trying everything i could, there is one problem remaining.

因此，我试图将django与nextjs集成，在尝试了所有可能的方法之后，仍然存在一个问题。

django being unable to load css, svgs and other files from nextjs project.

django无法从nextjs项目加载css、svgs和其他文件。

here's the code:

这是代码：

project.urls.py

project.urls.py

"""
URL configuration for django_with_nextjs project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""
from django.contrib import admin
from django.urls import path, include
import home
urlpatterns = [
    path('admin/', admin.site.urls),
    path("", include("home.urls")),
    
]

asgi.py:

asgi.py：

import os

from django.core.asgi import get_asgi_application
from django.urls import re_path, path

os.environ.setdefault("DJANGO_SETTINGS_MODULE", "django_with_nextjs.settings")
django_asgi_app = get_asgi_application()

from channels.auth import AuthMiddlewareStack
from channels.routing import ProtocolTypeRouter, URLRouter
from django_nextjs.proxy import NextJSProxyHttpConsumer, NextJSProxyWebsocketConsumer

from django.conf import settings

# put your custom routes here if you need
http_routes = [re_path(r"", django_asgi_app)]
websocket_routers = []

if settings.DEBUG:
    http_routes.insert(0, re_path(r"^(?:.next|.next|next).*", NextJSProxyHttpConsumer.as_asgi()))
    websocket_routers.insert(0, path(".next/webpack-hmr", NextJSProxyWebsocketConsumer.as_asgi()))


application = ProtocolTypeRouter(
    {
        # Django's ASGI application to handle traditional HTTP and websocket requests.
        "http": URLRouter(http_routes),
        "websocket": AuthMiddlewareStack(URLRouter(websocket_routers)),
        # ...
    }
)

consumers.py:

consumers.py：

from channels.generic.websocket import AsyncWebsocketConsumer
import json

class SomeConsumer(AsyncWebsocketConsumer):
    async def connect(self):
        await self.accept()

    async def disconnect(self, close_code):
        pass

    async def receive(self, text_data):
        text_data_json = json.loads(text_data)
        message = text_data_json['message']

        await self.send(text_data=json.dumps({
            'message': message
        }))

settings.py:

设置.py：

"""
Django settings for django_with_nextjs project.

Generated by 'django-admin startproject' using Django 4.2.3.

For more information on this file, see
https://docs.djangoproject.com/en/4.2/topics/settings/

For the full list of settings and their values, see
https://docs.djangoproject.com/en/4.2/ref/settings/
"""

from pathlib import Path

# Build paths inside the project like this: BASE_DIR / 'subdir'.
BASE_DIR = Path(__file__).resolve().parent.parent


# Quick-start development settings - unsuitable for production
# See https://docs.djangoproject.com/en/4.2/howto/deployment/checklist/

# SECURITY WARNING: keep the secret key used in production secret!
SECRET_KEY = 'django-insecure-@bv_^e@s^gjgbkk+i0yq6lppuk=8a9ksamtl99ocq1+=jq+*9b'

# SECURITY WARNING: don't run with debug turned on in production!
DEBUG = True

ALLOWED_HOSTS = []


# Application definition

INSTALLED_APPS = [
    "channels",
    'home.apps.HomeConfig',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
  
    "django_nextjs.apps.DjangoNextJSConfig",
]
APPEND_SLASH = False
REST_FRAMEWORK = {
    'DEFAULT_PERMISSION_CLASSES': [
        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'
    ]
}
ASGI_APPLICATION = "django_with_nextjs.asgi.application"

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

ROOT_URLCONF = 'django_with_nextjs.urls'

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

WSGI_APPLICATION = 'django_with_nextjs.wsgi.application'


# Database
# https://docs.djangoproject.com/en/4.2/ref/settings/#databases

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.sqlite3',
        'NAME': BASE_DIR / 'db.sqlite3',
    }
}


# Password validation
# https://docs.djangoproject.com/en/4.2/ref/settings/#auth-password-validators

AUTH_PASSWORD_VALIDATORS = [
    {
        'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator',
    },
    {
        'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator',
    },
]


# Internationalization
# https://docs.djangoproject.com/en/4.2/topics/i18n/

LANGUAGE_CODE = 'en-us'

TIME_ZONE = 'UTC'

USE_I18N = True

USE_TZ = True


# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/4.2/howto/static-files/

STATIC_URL = 'static/'

# Default primary key field type
# https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

DEFAULT_AUTO_FIELD = 'django.db.models.BigAutoField'



NEXTJS_HOST = 'localhost'
NEXTJS_PORT = 3000

home.urls.py (app):

home.urls.py（应用程序）：

"""
URL configuration for django_with_nextjs project.

The `urlpatterns` list routes URLs to views. For more information please see:
    https://docs.djangoproject.com/en/4.2/topics/http/urls/
Examples:
Function views
    1. Add an import:  from my_app import views
    2. Add a URL to urlpatterns:  path('', views.home, name='home')
Class-based views
    1. Add an import:  from other_app.views import Home
    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
Including another URLconf
    1. Import the include() function: from django.urls import include, path
    2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
"""

from django.urls import path, include
from . import views
urlpatterns = [
    
    path('', views.index, name="index"),
    path("products/<str:id>", views.pro, name="pro"),
    
]

websockets.py:

websockets.py：

async def websocket_application(scope, receive, send):
    while True:
        event = await receive()

        if event['type'] == 'websocket.connect':
            await send({
                'type': 'websocket.accept'
            })

        if event['type'] == 'websocket.disconnect':
            break

        if event['type'] == 'websocket.receive':
            if event['text'] == 'ping':
                await send({
                    'type': 'websocket.send',
                    'text': 'pong!'
                })

views.py:

views.py：

from django.shortcuts import render, HttpResponse
from .models import MyProduct
from django_nextjs.render import render_nextjs_page_async
# Create your views here.
async def index(request):
    return await render_nextjs_page_async(request)
    



def pro(request, id:str):
    new_object = MyProduct(name=id, desc="test", price_inr=1000)
    new_object.save()
    return HttpResponse("""

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>New Product Added Successfully!</h1>
</body>
</html>


""")

project.routing.py:

project.routing.py：

from channels.routing import ProtocolTypeRouter, URLRouter
from django.urls import path
from . import consumers

application = ProtocolTypeRouter({
    'websocket': URLRouter([
        path('ws/good/', consumers.SomeConsumer.as_asgi()),
    ]),
})

now for the nextjs project, it's just the default one with all the options yarn asks as "no", except for the App Router.
Also, I have created a folder named webpacks and put a .js file in it.

现在，对于nextjs项目，它只是默认的项目，除了AppRouter之外，所有选项都是“no”。此外，我创建了一个名为webpacks的文件夹，并在其中放入了一个.js文件。

Here's the folder structure:
nextjsproj:
...
webpacks:
webpack.config.dev.js
...

以下是文件夹结构：nextjsproj:。。。webpacks:webpack.config.dev.js。。。

webpack.config.dev.js:

webpack.config.dev.js：

const Path = require('path');
const Webpack = require('webpack');
const { merge } = require('webpack-merge');
const StylelintPlugin = require('stylelint-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

const common = require('./webpack.common.js');

module.exports = merge(common, {
  target: 'web',
  mode: 'development',
  devtool: 'inline-cheap-source-map',
  output: {
    chunkFilename: 'js/[name].chunk.js',
    publicPath: 'http://localhost:9091/',
  },
  devServer: {
    inline: true,
    hot: true,
    port: 9091,
    writeToDisk: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    }
  },

  // ...

});

If you need additional information, feel free to ask me.

如果您需要更多信息，请随时询问我。

I would be grateful to anyone who helps me.
Thanks in advance

我会感谢任何帮助我的人。提前谢谢

Here's my repository, you can compare it to your project.

这是我的存储库，您可以将其与您的项目进行比较。

I met the same error before, here are some solutions:

我以前也遇到过同样的错误，以下是一些解决方案：

1. Check the dependencies version:
   
   
   
   • Django-4.0.0
   
   
   • django-nextjs-2.4.0
   
   
   • channels-3.0.4
   
   
   
   


2. Use ASGI instead of WSGI.


3. Check all the apps are loaded.