Next.js

发表于 | 分类于 | | 阅读次数:
字数统计: 383 | 阅读时长 ≈ 1

Next.js 学习

Next.js是一个轻量级的React服务端渲染应用框架

有点

1 、用于服务器渲染React应用程序简单

2、静态导出 静态导出站点简单

3、附带了Next.js‘styked-jsx’ 与其他css-in-js 解决方案一起使用

4、凋零 自动拆分，基于文件系统的路由 热代码重载和通用呈现

5、可扩展 完全控制Babel和webpack 可定制服务 路由和下一个插件

6、准备生产针对较小构建大小，更快的开发人员编译以及许多其他改进进行优化

创建项目

mkdir my-next

cd my-next

npm init -y

npm install –save react react-dom next

mkdir pages

添加运行命令

修改 package.json 文件内的 scripts

“scripts”:{

​ “dev”:”next”,

​ “build”:”next build”,

​ “start”:”next start”

}

开启服务

npm run dev

默认端口3000

链接试列

// Link API
import Link from "next/link";

const Index =() =>(
	//普通链接
	<div>
		<p>hell next.js 我来学习了</p>
		<Link href="/about">
			<a>点我</a>
		</Link>
	</div>
	//链接抛锚
    		<Link href="/?abouts" >
			<a>点我3</a>
		</Link>
    //回到顶部
    	<Link scroll={false} href="/?counter=10">
        	<a>Disables scrolling</a>
    	</Link>
		<Link href="/?counter=10">
        	<a>Changes with scrolling to top 滚到顶部</a>
    	</Link>
);

export default Index;