next.js - 다른 파일의 내용 import 하는 방법

프로젝트 구조

 

 

data.js

let age = 20;
//let name = 'lee';
export default age;

//여러개의 변수는 export {age, name} , import {age, name}

 

 

cart > page.js

import data from './data.js'

export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <div className="cart-item">
          <p>상품명 {data}</p>
          <p>$40</p>
          <p>1개</p>
        </div>
      </div>
    )
  }

 

다른곳에 사용할 파일 마지막에 export default 변수;

사용할 파일에 import 변수 from '파일경로';

 

html 에서 {변수} 로 사용

import 할때 경로는 ./ 부터 적는게 좋음

 

 

- 컴포넌트 import

cart > work.js

export default function work() {
    return (
        <h1>안녕하세요</h1>
    )
}

 

cart > page.js

import { Component } from "react"
import Work from './work.js'


export default function Cart() {
    return (
      <div>
        <h4 className="title">Cart</h4>
        <Work/>
      </div>
    )
  }

컴포넌트는 첫글자  대문자로 작성 !!