參考:

• Next.js 提供功能

安裝

npm init -y 

npm install --save next react react-dom

在package.josn調整scripts

{
  "name": "react-next-prodject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "next": "^9.5.4",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  }
}

創建一個起手式

• Next.js約定目錄為pages所以開發起始位置為此
• pages/index.js 一定要一樣

// pages/index.js
const index = () => {
	return (
		<div>Next.js TEST</div>
	)
}

export default index

在 cli 輸入 npm run dev 可以看到以下畫面

Next Link

在Next中切換Route需使用Link

import Link from 'next/link'

// 要前往的路由
<Link href="/about">
  <a>前往XXX</a>
</Link>

Next Router

在Function中切換Route

import Router from 'next/router'

server端渲染Router

使用 EXPRESS server