问题： django 无法从 nextjs 项目加载 css、svgs 和其他文件
这是错误：
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
所以，我试图将 django 与 nextjs 集成，在尝试了一切之后，仍然存在一个问题。
django 无法从 nextjs 项目加载 css、svgs 和其他文件。
这是代码：
项目.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:
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：
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
}))
设置.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（应用程序）：
"""
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：
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：
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：
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()),
]),
})
现在对于 nextjs 项目，它只是默认项目，除了 App Router 之外，yarn 要求的所有选项都为“否”。 另外，我创建了一个名为 webpacks 的文件夹，并在其中放入了一个 .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": "*",
}
},
// ...
});
如果您需要更多信息，请随时询问我。
我将感激所有帮助过我的人。 预先感谢