Блог

настройка текущего каталога:

 - components
    - NavBar
    - Header
    - Layout
- pages
    - pages
        - demo.js
- _app.js
- index.js
 

 // index.js
import React from 'react';
import NewLayout from "../../components/NewLayout/NewLayout.js";
import $nacelle from '../../services/nacelle';

const Index = ({page}) => (
    <>
        <NewLayout header={page} />
        <pre>{JSON.stringify(page.id, null, 2)}</pre>
    </>
);

export async function getStaticProps({ context }) {
    try {
        const page = await $nacelle.data.content({
        handle: 'header_us_retail',
        type: 'header'
      });
    
        return {
          props: { page }
        };
    } catch {
        // do something useful if it doesnt work
        const page = 'failed';
        return {
          props: { page }
        };
    }
}

export default Index;

 

Я импортирую макет в index.js файл, загрузка асинхронных данных и передача их в макет в качестве реквизитов, которые затем будут использоваться для отображения заголовка и навигационной панели (которые импортируются компонентом макета). Это работает так, как ожидалось в индексном файле, однако я хочу, чтобы эта же функциональность работала в demo.js файл и любой другой файл, который я создаю на страницах или где-либо еще. Скорее всего, проблема в том, как я пытаюсь использовать Nextjs и реагировать (новичок в обоих), любая помощь будет очень признательна.

Оказывается, проблема заключалась в том, как Гондола получала доступ к переменным среды, так что это не проблема NextJS или реакции.

По словам разработчиков, существует несколько способов предоставления переменных среды, и следующий метод решил мою конкретную проблему:

 // file in root: next.config.js
module.exports = {
  env: {
    NACELLE_SPACE_ID: process.env.NACELLE_SPACE_ID,
    NACELLE_GRAPHQL_TOKEN: process.env.NACELLE_GRAPHQL_TOKEN,
    NACELLE_ENDPOINT: process.env.NACELLE_ENDPOINT,
  },
};