NextJS에서 데이터 가져오기

NextJS에서는 임의의 파일을 가져오고 내보낼 수 있습니다. 이것은 ES6 모듈로 작업해 본 적이 있다면 이미 할 수 있어야 합니다. 당연히 이것은 NextJS에서도 작동하지만, 초보자에게는 항상 명확하지는 않습니다. 그러므로 가져오기에 대해 이야기해 봅시다.

예를 들어 어떤 페이지가 있다고 가정해 봅시다. 이 페이지에서 우리는 몇 가지 데이터를 표시하고 싶습니다. 예를 들어, 일부 데이터가 담긴 배열이 있다고 가정해 봅시다. 이 데이터가 너무 커서 별도의 파일로 분리하는 것이 편리하다고 느껴집니다.

이 파일의 이름은 무엇이든 될 수 있습니다. data.js라고 합시다. 이 파일 안에 데이터 배열을 배치할 것입니다. 그리고 page.jsx 파일에는 NextJS 자체에 의해 처리되고 브라우저로 전송될 페이지가 있을 것입니다.

즉, 우리는 다음과 같은 파일 구조를 갖게 됩니다:

• /src//app//test/page.jsxdata.js

data.js 파일에 몇 가지 데이터 배열을 배치해 봅시다:

src/app/test/data.jsexport default [
  1, 2, 3, 4, 5,
];

page.jsx 페이지를 만들어 봅시다:

src/app/test/page.jsxexport default function Test() {
  return <h1>Test</h1>;
}

데이터 배열을 페이지에 연결해 봅시다:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  return <h1>Test</h1>;
}

반복문으로 이 데이터를 출력해 봅시다:

src/app/test/page.jsximport data from './data.js';

export default function Test() {
  let list = data.map(function(item) {
    return <li>{item}</li>
  });
  
  return <>
    <h1>Test</h1>
    <ul>
      {list}
    </ul>
  </>;
}

posts.jslet posts = [
  'post1',
  'post2',
  'post3',
  'post4',
  'post5',
];

prods.jslet prods = [
  {
    id: 1,
    name: 'prod1',
    cost: 100,
  },
  {
    id: 2,
    name: 'prod2',
    cost: 200,
  },
  {
    id: 3,
    name: 'prod3',
    cost: 300,
  },
];