Next.js初步使用

文章目录

- 安装和运行
- 页面
- 静态文件

React初步，但不熟悉React也可以学习本文。

安装和运行

Next.js是一个基于React的服务端渲染框架，可以实现构建高性能、可扩展的React应用，提供了很多方便的工具和功能，包括自动代码分割、服务器端渲染、静态文件服务、自动缩小、热模块替换等等。它还内置了一些常用的功能，如处理CSS、图片、Markdown等文件。Next.js也支持使用TypeScript开发，并提供一些插件来帮助开发者更好地使用TypeScript。

首先安装

npx create-next-app@latest

接下来按照提示，逐一设置项目名，都选默认值即可。

安装完成后，进入项目，用run运行

>cd my-app
>npm run dev

然后根据提示，打开http://localhost:3000/就可以了

在这里插入图片描述

npm run dev表示用开发模式启动next.js，这些npm run指令与next指令的对应关系被存放在配置文件package.json的scripts中，内容如下

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

其功能如下

dev 以开发模式启动 Next.js
build 构建用于生产环境的应用程序
start 启动Next.js生产环境服务器
lint 启动Next.js的内置ESLint，以检查代码错误

页面

在my-app路径下新建一个pages文件夹，则该文件夹内的页面可以通过文件名进行路由。例如在pages中新建一个about.js文件

function About(){
    return <div>About</div>
}

export default About

然后输入http://localhost:3000/about就可以自行跳转到这个页面。

在这里插入图片描述

通过Link组件，可以实现站内跳转，将about.js和page.js中的内容分别修改如下

//about.js
import Link from "next/link"

function About(){
    return (
        <div>
            <Link href="/">主页</Link>
            <p>About</p>
        </div>
    )
}
export default About

// page.js
import Link from "next/link"
export default function Home() {
  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">
        <Link href="/about">about</Link>
    </main>
  )
}

即主页用"/“来表示，而pages下的页面通过”/xxx"来表示，跳转效果如下

在这里插入图片描述

静态文件

在public路径下添加的文件，可通过"/"作为起始路径来访问，例如，将about.js代码修改如下

import Link from "next/link"
import Image from 'next/image'

export default function About(){
    return (
        <div>
            <Link href="/">
                <Image src="/next.svg" width={300} height={60}/>
            </Link>
            <p>About</p>
        </div>
    )
}