标签: nextjs

我正在尝试使用webpack将font-awesome添加到我的next.js项目中.我试过按照我在网上找到的各种说明(使用文件加载器,url-loader),但没有任何对我有用.我暂时放弃了使用webpack加载font-awesome,但我想知道如何实现这一目标.目前我有一个.scss文件,我用来加载font-awesome.

它的内容是:

$fa-font-path: "static/fonts";
@import "~font-awesome/scss/font-awesome.scss";

我手动将字体移动node_modules/font-awesome/fonts到static/fonts.这很好用,但我想知道2017年是否有一个webpack 2方法.

我正在构建一个Next.JS应用程序,它将从Python API和Postgres数据库中获取数据.

通常这很简单,除了要求我需要从服务器端发送所有请求,而不是用户的客户端.

我一直在和grokking一起工作getInitialProps,但我不相信这是我需要的完整解决方案,因为这条线在README:

对于初始页面加载,getInitialProps仅在服务器上执行.getInitialProps只有在通过链接组件或使用路由API导航到不同路由时才会在客户端上执行.

它似乎getInitialProps是为初始页面加载而设计的,而不是为后续的服务器端数据提取而设计的.

如何以所有请求来自服务器端的方式设计我的Next.JS应用程序？

笔记:

• 每个请求都可以实际上导致初始页面加载.
• 用户客户端可以与Node(Next.JS)服务器通话,因为它是公开公开的.我目前正在与在包装Next.JS试验Express服务器.

Ty提前获得任何帮助

我正在学习基本的下一个js。如果我们运行 npm run build create-react-app 将生成构建文件夹 index.html 和捆绑文件。在接下来的js中。它不会创建任何构建文件。我将如何在服务器中部署下一个 js 项目

.next 文件夹

我正在研究基于反应的 nextjs 应用程序。一些 npm 包使用外部 css 导入。我收到类似的错误

Module parse failed, you may need an appropriate loader to handle this file type.

如何在我的 nextjs 应用程序中支持从外部包导入 css。我通过在 next.config.js 中进行更改来检查某个地方，它有效。但我找不到合适的。如果有人能帮助我解决这个问题，那就太好了。

我有一个干净的网址,其中包含一些查询参数.

HTTP://本地主机:3000 /后/:ID

我试图像这样在客户端捕获查询参数'id'.

static async getInitialProps({req, query: { id }}) {
    return {
        postId: id
    }
}

render() {
  const props = { 
       data: {
          'id': this.props.postId        // this query param is undefined
       }
  }
  return (
     <Custom {...props}>A component</Custom>
  )
}

我的快递端点看起来像这样.

app.post(
    '/post/:id',
    (req, res, next) => {
        let data = req.body;
        console.log(data);
        res.send('Ok');
    }
);

但是我的服务器端控制台输出最终会像这样结束.

{ id: 'undefined' }

我已经阅读了文档和github问题,但我似乎无法理解为什么会发生这种情况.

我正在制作Reddit克隆，并且正在使用Next.js，以便呈现其服务器端。我开始时没有使用Next.js，当我了解了它之后，我立即切换到了它。

我创建了一个自定义，_app.js以便页眉和侧边栏出现在每个页面上，并且它充当保存应用程序状态的最顶层组件。后来还不太行。

这里是.project/src/pages/_app.js：

import App, { Container } from 'next/app';

// Components
import Header from '../components/Header/Header';

const MainLayout = props => (
  <React.Fragment>
    <Header
      isSidebarOpen={props.isSidebarOpen}
      sidebarToggle={props.sidebarToggle}
    />
    {props.children}
  </React.Fragment>
);

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};

    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }

    return { pageProps };
  }

  state = {
    isSidebarOpen: true
  };

  sidebarToggle = () => {
    this.setState({ isSidebarOpen: !this.state.isSidebarOpen …

在问这个问题之前，我看了以下问题，但是我认为我是不同的，因为我没有使用Docker：Nextjs无法在生产node_env的'.next'目录中找到有效的版本。

我也试过这个去掉“接下来”文件夹，但是仍然得到同样的问题的方法。

解决了许多其他问题之后，我只能解决一个似乎无法解决的问题。当我尝试部署到Heroku时，不断出现以下错误：

node server.js

Could not find a valid build in the '.next' directory! Try building your app with 'next build' before starting the server.

这是我的package.json文件：

{
  "name": "StarterApp",
  "version": "1.0.0",
  "engines": {
    "node": "10.4.1"
  },
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "mocha",
    "dev": "node server.js"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "4.16.3",
    "fs-extra": "^5.0.0",
    "ganache-cli": "^6.1.3",
    "mocha": "^5.2.0",
    "next": "^4.2.3",
    "next-routes": "^1.4.2",
    "node-gyp": "^3.7.0",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "rebuild": "^0.1.2",
    "semantic-ui-css": "^2.3.2", …

今天遇到了这样的项目结构的复杂问题

packages
  /app
    pages/
    package.json
  /ui-kit
    pages/
    package.json
  /shared
.babelrc
package.json

root lvl 包 json 定义了 nextjs 应用程序的workspaces: [packages/*]位置app和ui-kit位置。

我在 root lvl package.json 中有以下脚本

"dev:app": "next packages/app",
"dev:ui-kit": "next packages/ui-kit"

在我引入shared文件夹之前，这两种方法都很好用，它本质上包含一些功能/组件等......在包之间重复使用。一旦我将它包含在其中一个中，app否则ui-kit我会收到这样的错误

在 ./packages/shared/index.js

模块解析失败：意外标记 (4:21) 您可能需要一个适当的加载程序来处理此文件类型。| 从“反应”导入反应 | | export default () => 你好，共享！|

所以看起来 nextjs 没有将任何加载器应用于它指向的文件夹之外的任何东西。有没有办法以某种方式解决这个问题？即从根文件夹开始，但根据不同的脚本命令以某种方式将其指向不同的入口文件？

我正在使用NextJs构建一个应用程序。我有两个不同的用于生产和开发的 URL，我想访问客户端环境的相应 URL。我遵循了本指南，但我的 PROCESS.ENV.API_URL 开发是空的。

这是我的文件：

.env：

API_URL=https://my-staging-url.com

.env.生产：

API_URL=https://my-production-url.com

.babelrc：

{
  "presets": [
    "next/babel"
  ],
  "env": {
    "development": {
      "plugins": ["inline-dotenv"]
    },
    "production": {
      "plugins": ["transform-inline-environment-variables"]
    }
  }

}

环境变量用法：

import 'isomorphic-fetch';

export const SET_QUERY = 'SET_QUERY';
export const CLEAR_SEARCH = 'CLEAR_SEARCH';
export const START_FETCHING_SEARCH = 'START_FETCHING_SEARCH';
export const SET_SEARCH_RESULTS = 'SET_SEARCH_RESULTS';
export const FETCHING_SEARCH_FAILED = 'FETCHING_SEARCH_FAILED';

export const getSearch = value => {
    const url = `${process.env.API_URL}search?q=${value}`; // THIS IS EMPTY
    console.log(url);
    return fetch(url); …

在我的 nextJS 应用程序中，用户可以进行登录（登录页面），这会创建一个带有令牌的 cookie 并重定向到使用主要组件的路由（主页）。

在 Main 组件中，我使用 getInitialProps 来获取 cookie 令牌。但这仅在刷新页面后才有效。所以现在我正在登录并被重定向。如果我单击按钮，则没有令牌。刷新页面后，我确实得到了一个令牌。

我怎样才能避免这种情况？我想我在服务器端做错了什么......

登录

export class Login extends Component {
  render () {
    return (
      <Form id='login' onSubmit={this._onSubmit.bind(this)}>
        // Input fields
      </Form>
    )
  }

  _onSubmit = (event) => {
    event.preventDefault()
    const { username, password } = this.state

    // Sends mutation request to graphQL server
    this.props.signinUserMutation({
      variables: { username, password }
    }).then(response => {
      // Returns token
      const token = response.data.token
      if (token) {
        Cookies.set('auth-token', token)
        this.props.client.resetStore().then(() => {
          redirect({}, '/main') …