小编Tha*_*yen的帖子

据我了解，Nextjs 是一个需要服务器功能的 Node 框架，因此，使用它进行服务器端渲染不能仅托管在 S3 上。然而，这是否意味着唯一的选择是将整个应用程序托管在 EC2 上（这要昂贵得多），还是还有其他中途解决方案？

我想获得手机用户的时区,这样我可以添加或者到.减去与UTC时间,我从我的API获得,然后就这些操作(通知,例如).

我只找到了如何使用DatePickerIOS添加偏移量,但没有别的......是否可以从前面获取它？

我想知道mapDispatchToProps今天是否还有一点使用.我正在研究redux文档教程(构建一个todo列表),其中VisibleTodoList描述如下:

import { connect } from 'react-redux'
import { toggleTodo } from '../actions'
import TodoList from '../components/TodoList'

const getVisibleTodos = (todos, filter) => {
  switch (filter) {
    case 'SHOW_ALL':
      return todos
    case 'SHOW_COMPLETED':
      return todos.filter(t => t.completed)
    case 'SHOW_ACTIVE':
      return todos.filter(t => !t.completed)
  }
}

const mapStateToProps = (state) => {
  return {
    todos: getVisibleTodos(state.todos, state.visibilityFilter)
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    onTodoClick: (id) => {
      dispatch(toggleTodo(id))
    }
  }
} …

我目前正在开发一个 React 项目，该项目是通过 Create React App 发起的。目前，为了编译，我使用npm run start运行的默认命令react-scripts start。

我有很多@typescript-eslint规则迫使我在交付和部署之前必须拥有干净的代码。但是，在开发过程中，我可能有一些未使用的变量，并且仍然想编译以查看其他内容是否有效。

是否有命令强制编译，同时忽略部分或全部@typescript-eslint规则？

我将 Next.JS 与其他一些模块一起使用。其中之一，Megadraft，带有自己的 CSS。我不知道这是否相关，但我也使用 PurgeCSS。

在开发模式下一切正常，但 CSS 似乎在生产模式下中断。更明确地说，Megadraft 的所有类在生产模式中似乎都没有定义。检查器中的 HTML 节点仍然显示类在这里，但它们只是没有定义。

这是我在我的pages/_app.js文件中导入上述 CSS文件的方法：

// pages/_app.js
import "css/tailwind.css";
import "megadraft/dist/css/megadraft.css";

这是我的postcss.config.js：

// postcss.config.js
const purgecss = [
    "@fullhuman/postcss-purgecss",
    {
        content: [
            "./components/**/*.js",
            "./Layout/**/*.js",
            "./pages/**/*.js",
            "./node_modules/next/dist/pages/**/*.js",
            "./node_modules/next/dist/Layout/**/*.js",
            "./node_modules/next/dist/components/**/*.js"
        ],
        defaultExtractor: (content) => content.match(/[A-Za-z0-9-_:/]+/g) || [],
    },
];
module.exports = {
    plugins: [
        "postcss-import",
        "tailwindcss",
        "autoprefixer",
        ...(process.env.NODE_ENV === "production" ? [purgecss] : []),
    ],
};

我正在使用 next ^9.4.4。可能值得注意的是 TailwindCSS 似乎工作得很好（在 dev 和 prod 中），但我认为这可能是因为它在 postcss 中用作插件......

以防万一，我将 webpack …

我正在尝试添加导入成员的排序，例如sort-member中的此规则。

但是，由于我已经在使用eslint-plugin-import，因此存在冲突，因为每个规则都试图根据不同的参数对导入进行排序：

• sort-member按照顺序排序["none", "all", "multiple", "single"]，具体取决于一个模块的导入数量
• eslint-plugin-import["builtin", "external", "parent", "sibling", "index"]根据导入类型按顺序排序

有没有办法只使用成员排序sort-member（==忽略memberSyntaxSortOrder规则），或者是否有类似于内置的memberSorteslint-plugin-import的功能？

我想做的就是出现以下错误：

import { b, a, c } from 'foo.js'

并自动将其固定为：

import { a, b, c } from 'foo.js'

在我的React-Native应用程序上安装fbsdk后,我收到此错误:

Use of undeclared identifier 'UIUserInterfaceIdiomTV'

这是在文件Pods> FBSDKCoreKit> FBSDKOrganicDeeplinkHelper.m

我得到了这个,即使我帮助一个朋友做的和我完全一样,但她没有得到它.我尝试从头开始重新安装所有内容,以检查错误是否来自我没有使用最新版本,但我仍然遇到此错误.

一个快速的解决方法是简单地从中删除案例switch (device.userInterfaceIdiom),但我希望有人之前遇到过这个错误或者想知道它可能来自哪里.

谢谢!

中进行的 API 调用getStaticProps似乎会导致错误 500。

这是我的组件的代码：

import React from "react";
import API from "services/api";

const ArtistListPage = (props) => {
    return (
        <>
            {props.artists.map((artist) => (
                <div key={artist.id}>{artist.first_name}</div>
            ))}
        </>
    );
};

export async function getStaticProps() {
    // Get external data from the file system, API, DB, etc.
    const res = await API.get("/get_artists");
    const artists = await res.data.json();
    return {
        props: { artists },
    };
}

export default ArtistListPage;

我想提一下，在 a 中进行相同的 API 调用useEffect，以及将硬编码对象传递到propsin 中 …

在我的 Next.js (9.4.4) / Tailwind.css (1.4.6) 项目中，我使用了一种名为 SpaceGrotesk 的自定义字体。为了使其正常工作，我将字体设置为 my public/fonts/spaceGrotesk，然后按如下方式配置文件：

// next.config.js
module.exports = {
    cssModules: true,
    webpack: (config, options) => {
        config.node = {
            fs: "empty",
        };
        config.module.rules.push({
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            use: [
                options.defaultLoaders.babel,
                {
                    loader: "url-loader?limit=100000",
                },
                {
                    loader: "file-loader",
                },
            ],
        });
        return config;
    },
};

/** tailwind.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

@font-face {
    font-family: SpaceGrotesk;
    font-weight: 400;
    font-display: auto;
    src: url(../public/fonts/spaceGrotesk/SpaceGrotesk-Regular.woff) format("woff");
}

// tailwind.config.js
module.exports = {
    purge: {
        mode: "all", …

使用 NextJS，我getStaticPaths通过 API 调用来定义一些路由：

/**
 * @dev Fetches the article route and exports the title and id to define the available routes
 */
const getAllArticles = async () => {
    const result = await fetch("https://some_api_url");
    const articles = await result.json();

    return articles.results.map((article) => {
        const articleTitle = `${article.title}`;

        return {
            params: {
                title: articleName,
                id: `${article.id}`,
            },
        };
    });
};

/**
 * @dev Defines the paths available to reach directly
 */
export async function getStaticPaths() {
    const paths …

我基本上是在 Next.js 上开发一个博客。因为它是另一个负责后端的团队，所以我目前正在从 getStaticProps 调用 fetch API 来获取我的文章，尽管直接进行数据库查询是更好的做法：

export async function getStaticProps({ params, res }) {
    try {
        const result = await fetch(`${API.baseURL}/get_article/${params.id}`);
        const article = await result.json();

        return {
            props: { article },
        };
    } catch (error) {
        res.statusCode = 404;
        return { props: {} };
    }
}

虽然这在开发模式下非常有效，但获取文章、编辑它，然后再次访问它在生产中不起作用（即使在本地，使用内置版本）。

我想这与 Next.js 以某种方式处理缓存有关......我做错了什么？谢谢！