react,next 02. scripts 설정 및 next 라우팅 시스템

package.json 설정

front폴더의 package.json 변경

  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },

• npm run dev 하면 프론트서버 실행됨

라우팅

next는 pages폴더가 라우터역할을 한다.
이 pages에서 서버사이드렌더링,코드스플리팅을 알아서 해준다.

• pages>index.js는 ‘/’ 메인경로라고 생각하면 된다.

• localhost:3000/about 경로로 가면 pages폴더의 about.js파일이 실행된다.

• localhost:3000/user/create 경로로 가면 pages폴더의 user폴더안의 user.js파일이 실행된다.

Link 사용방식

import React from "react";
import Link from "next/link";

const Home = () => {
  return (
    <>
      <Link href="/about">
        <a>about</a>
      </Link>
      <div>Hello, Next!!</div>
    </>
  );
};

export default Home;