Next.js 入門(1)

目錄

1.什麼是Next.js

2.手動創建項目

3.腳手架create-next-app快速搭建項目

4. Next.js的Page和Component使用

5.路由的標籤跳轉和編程跳轉

---

 

1.什麼是Next.js

---

SPA：單頁面應用
React，Vue 單一頁面，首頁加載過慢，不能SEO
Next.js服務器端渲染（ssr）

優點：

1. 搭建起來非常輕鬆
2. 自帶數據同步
3. 豐富的插件，自己形成了生態
4. 靈活的配置

2.手動創建項目

---

1. 創建項目文件夾
2. npm init 項目初始化（默認）
3. yarn add react react-dom next
4. package.json配置3.腳手架create-next-app快速搭建項目

“script”:{
    "test"://默認有的，
    "dev":"next",
    "build":"next build",
    "start":"next start"   
}

3.腳手架create-next-app快速搭建項目

---

1. 安裝腳手架 npm install -g create-next-app
2. 創建項目 npx create-next-app next-create

4. Next.js的Page和Component使用

---

Pages

在pages目錄下創建js文件，即生成了路由，可以直接輸入名稱跳轉

---

 

import React from 'react'
import Link from 'next/link'

export default function Index() {
  return (
    <div>
      <div>歡迎來到首頁</div>
        <Link href="./pageA"><a>去PageA頁面</a></Link>
        <br />
        <Link href="./pageB"><a>去PageB頁面</a></Link>
    </div>
  )
}

components

1. 在components目錄下創建並導出組件
2. 在入口文件中引入組件

5.路由的標籤跳轉和編程跳轉

---

標籤跳轉

import Link from 'next/link'
export default function PageA() {
    return (
        <div>
            <div>我是PageA頁面</div>
            <Link href="/"><a>返回首頁</a></Link>
        </div>
    )
}

編程式跳轉

import Router from 'next/router'
export default function PageC() {
    function goA(){
        Router.push('/pageA')
    }
    return (
        <div>
            <button onClick={goA}>去PageA頁面</button>
        </div>
    )
}