Next.js的Page和Component使用

Page

pages下新建一个文件 test.tsx

写入

function Test() {
  return (
    <div>
    <h1>Testsss</h1>
    </div>
  );
}

export default Test;

在端口号3000后输入/test就能跳转路由页面

Component

component文件夹下新建一个文件

export default ({children})=><button>{children}</button> 

在pages文件夹的index.tsx文件下引入组件

import Test from "../component/test"

export default function Index() {
  return(
    <div>
      Hello
      <Test>按钮组件</Test>
    </div>
)}