Tìm kiếm trang web

javascript - Kết nối NextJS, next-i18next, với-redux, với-redux-saga: "Lỗi: Nếu bạn có một phương thức getInitialProps trong tệp _app.js tùy chỉnh của mình..."

Tôi đang cố gắng kết nối một ứng dụng NextJS/React hoạt động bình thường sử dụng 'with-redux-saga' và 'with-redux' với 'next-i18n' (https://github.com/isaachinman/next-i18next) -- nhưng khi ứng dụng của tôi khởi động, tôi nhận được lỗi sau:

Lỗi: Nếu bạn có một phương thức getInitialProps trong tệp _app.js tùy chỉnh của mình, bạn phải rõ ràng trả về pageProps. Để biết thêm thông tin, xem: https://github.com/zeit/next.js#custom-app

TypeError: Không thể đọc thuộc tính 'namespacesRequired' của undefined tại Function.getInitialProps (/Users/cerulean/Documents/Projects/PAW-React/node_modules/next-i18next/dist/hocs/app-with-translation.js:94:57) tại process._tickCallback (internal/process/next_tick.js:68:7)

Nhưng tôi đang trả về props của trang trong _app.js của mình.

// _app.js
 static async getInitialProps({ Component, ctx }) {

    const pageProps = {};
    let temp;

    if (Component.getInitialProps) {
      temp = await Component.getInitialProps({ ctx });
    }
    Object.assign(pageProps, temp);
    return { ...pageProps };
  }

Có lẽ có điều gì đó sai với cách tôi kết hợp các HOC khác nhau? Trong _app.js tôi có:

export default withRedux(createStore, { debug: false })(withReduxSaga({ async: true })(i18nInstance.appWithTranslation(MyApp)));

Và trong index.js của tôi tôi có:

   // index.js
const mapStateToProps = (state) => ({ homeData: getHomePageData(state) });

export default connect(mapStateToProps)(withNamespaces('common')(Index));

Bất kỳ thông tin nào cũng rất được trân trọng!

Câu trả lời #1

Đối với bất kỳ ai đến với vấn đề này và tự hỏi @cerulean muốn nói gì trong câu trả lời của anh ấy.

1) sử dụng require thay vì import

NextJS sẽ không biên dịch các module của bạn nếu bạn sử dụng một máy chủ tùy chỉnh (thêm thông tin). Do đó, bạn không thể sử dụng import trong cấu hình next-i18next của mình mà không trải qua nhiều khó khăn.

// NextI18NextConfig.js

const NextI18Next = require('next-i18next/dist/commonjs')

module.exports = new NextI18Next({
  defaultLanguage: "en",
  otherLanguages: ["de"]
  // ... other options
});

// server.js

const nextI18next = require("./path/to/NextI18NextConfig");

// ... the rest of your server.js code

Đây là sự kết hợp từ ví dụ và tài liệu của next-i18next

2) giữ pageProps nguyên như cũ

Bạn không thể tùy tiện thay đổi giá trị trả về của getInitialProps. Nếu bạn cần thêm các thứ khác, bạn nên cẩn thận để không thay thế hoặc thao túng pageProps. Xem bên dưới.

  static async getInitialProps({ Component, ctx }) {
    let pageProps = {}

    const extraStuff = doSomeExtraStuff()

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

    return { pageProps, extraStuff }
  }

Thêm về điều đó trong chủ đề này.

Câu trả lời #2

Nếu bạn đã cấu hình redux sagas đúng cách, cách này hoạt động với tôi:

export default withRedux(configureStore)(withReduxSaga(appWithTranslation(MyApp)));