小编jul*_*ves的帖子

我想在应用程序中使用css和。scssnext.js

我next.config.js在我的项目中。

此配置适用于scss：

// next.config.js
const withSass = require('@zeit/next-sass');

module.exports = withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
})

我不知道如何结合const withCSS = require('@zeit/next-css');我当前的配置。

我想使用自定义配置scss（来自我的代码片段）。

有人可以帮我配置下一步css和scss模块？

我试过：

// // next.config.js
const withSass = require('@zeit/next-sass');
const withCSS = require('@zeit/next-css');

module.exports = withCSS(withSass({
    cssModules: true,
    cssLoaderOptions: {
        importLoaders: 1,
        localIdentName: "[local]___[hash:base64:5]",
    }
}))

不工作...

当我导出为生产时，我不明白这些错误npm run build，但当我测试时npm run dev它工作得很好。我使用API 路由getStaticProps并从中获取。getStaticPath

首先当我npm run build

FetchError: invalid json response body at https://main-website-next.vercel.app/api/products reason: Unexpected token T in JSON at position
0
    at D:\zummon\Main Website\main-website-next\node_modules\node-fetch\lib\index.js:272:32
    at processTicksAndRejections (internal/process/task_queues.js:97:5)
    at async getStaticPaths (D:\zummon\Main Website\main-website-next\.next\server\pages\product\[slug].js:1324:18)
    at async buildStaticPaths (D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:16:80)
    at async D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\utils.js:26:612
    at async D:\zummon\Main Website\main-website-next\node_modules\next\dist\build\tracer.js:1:1441 {
  type: 'invalid-json'
}

\pages\product\[slug]

import { assetPrefix } from '../../next.config'

export default function Page(){...}

export const getStaticProps = async ({ params: { …

我试图在 Next.js i18n 中设置我的默认语言，但总是将“En”作为默认语言，称为后备。

我也收到这个错误：

错误：[@formatjs/intl 错误 MISSING_DATA] 缺少区域设置的区域设置数据：Intl.NumberFormat 中的“sq”。使用默认区域设置：“en”作为后备

module.exports = {
    i18n: {
        locales: ['sq', 'en'],
        defaultLocale: "sq",
    }
}

我有一个用 React Js 构建的网站，也在 Next Js 上构建了相同的网站。

我现在面临的问题是，与react-router-dom相比，nextJs中的路由器似乎非常慢，更改路由大约需要2-3秒。

以下是您可以通过浏览不同页面来感受性能差异的 URL。

https://cutt.ly/mhbPkOE (React Router Dom) 与 https://cutt.ly/BhbPvHv (NextJs)

我在 Github 上读到了一些评论，其中很少有专家说它将在生产中解决。但在生产中看起来也一样。

请看下面的代码

_app.jsx

// import App from 'next/app'
import React from "react"
import Router from 'next/router';

import "../static/sass/application.scss";

import "bootstrap/dist/css/bootstrap.min.css";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import 'semantic-ui-css/semantic.min.css'
import { wrapper } from "../../redux/utils/store"

import App from 'next/app';
// A simple component that we created
import {LoaderOverlay} from '../components/Reusable'
class MyApp extends App {
    constructor(props){
        super(props)
        this.state = {
            isLoading: false,
        }
        Router.onRouteChangeStart …

在我的项目中，我有一个命名空间，它导出一些使用 Axios 的函数，在同一个文件中，我向 axios 实例添加一个拦截器，如下所示：

axios.interceptors.response.use(
    (res) => res,
    (error) => {
      if (
        error.response &&
        (error.response.status?.toString() === "400" ||
          error.response.status?.toString() === "403" ||
          error.response.status?.toString() === "404")
      ) {
        return Promise.reject(
          Error(JSON.stringify(error.response.data?.status?.errors[0]))
        );
      } else if (error.response) {
        return Promise.reject(
          Error(
            `server responsed with the following code: ${error.response?.status} and the following message: ${error.response?.statusText}`
          )
        );
      } else if (error.request) {
        return Promise.reject(
          Error(
            "The request was made but no response was received, check your network connection"
          )
        );
      } else …

因此，在从本地主机移动到远程主机并通过 herokuapp.com 部署我的 Strapi 后，我丢失了所有 Strapi 数据。

我在我个人的 NEXT.JS 项目中使用 Strapi。

幸运的是，我的 Strapi 数据库不是那么大，所有内容类型都被保留，所以我能够很快地重新创建数据库。而且这只是一个个人项目。

但我想知道，如果我决定推动 Strapi 在更专业的环境和实际项目 \xe2\x80\x93 中使用，我如何从本地开发转移到部署而不丢失所有数据？

有没有办法在部署之前导出所有内容，然后将其导入到已部署的 CMS 中，或者这是如何工作的？

另外 \xe2\x80\x93 如果我想反过来怎么办？我将继续使用 Heroku 上的 Strapi 开发我的应用程序，但在某些时候我会希望在本地复制 CMS。数据存储在哪里以及如何访问数据？

我正在将 next-auth 包集成到我的新 Next.js 项目中。我已遵循所有 Next.js 和 next-auth 文档，但无法找到解决方案。

我面临的问题是这样的：我想使用提交到在 Laravel 上运行的 API 服务器的电子邮件和密码登录我的 Next.js 应用程序。提交登录表单时，我正在执行以下功能。

import { signIn } from "next-auth/client";

const loginHandler = async (event) => {
    event.preventDefault();

    const enteredEmail = emailInputRef.current.value;
    const enteredPassword = passwordInputRef.current.value;

    const result = await signIn("credentials", {
        redirect: false,
        email: enteredEmail,
        password: enteredPassword,
    });

    console.log("finished signIn call");
    console.log(result);
};

下面显示的代码在我的pages/api/auth/[...nextauth].js

import axios from "axios";
import NextAuth from "next-auth";
import Providers from "next-auth/providers";

export default NextAuth({
    session: {
        jwt: true,
    },
    providers: [ …

我尝试在 Next.js 中导入图像，但收到此错误。我不知道出了什么问题，这里有人可以帮我解决这个问题吗？该图像位于公共文件夹中，这是我运行服务器时遇到的错误。

错误：无法解析 src“../public/logo.png” next/image，如果使用相对图像，则必须以前导斜杠“/”开头或者是绝对 URL（http:// 或 https://）

我正在倾斜 Next.js，我发现它用两个跨度next/image包装img并将内联样式添加到img覆盖我的类样式的标签中

如何删除内联样式和包装 HTML 标签（如spans和 ）divs？

我的代码看起来像

import Image from 'next/image';
<Image className={'imgBack'} src={myImg} width="160" height="160" alt="" />

结果

<span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
    <span style="box-sizing: border-box; display: inline-block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: relative; max-width: 100%;">
    <img …

index.test.ts我正在 Next.js 应用程序中为 API 路由编写集成测试，我想知道将文件放在目录下是否有任何问题/pages。我希望测试尽可能接近文件，而不是必须在__test__目录内映射项目结构。

./pages/api/path/index.ts

handler.get(async (req: NextApiRequest, res: NextApiResponse) => {
  ...
});

export default  handler;

./pages/api/path/index.test.ts

import { testClient } from "__test__/utils/testClient";

describe("Testing API  POST: /api", () => {
  test("Should return 401 when not authenticated", async () => {
    const request = testClient({ handler });
    const res = await request.post("/api/applications");
    expect(res.status).toEqual(401);
  });
});