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>
    )
}