Next.js 入门

创建项目

npm init next-app [项目名] 
// 选择 Default starter app
cd next-demo
touch .gitignore
yarn dev
// 浏览器打开控制台给出的网址，创建成功

image.png

image.png

约定大于配置

• 创建pages/posts/first-post.js
• 访问路径 /posts/first-post

示例

import React from "react";
import Link from "next/link";

export default function firstPost() {
    return (
        
            

                first Post
                

                // Link快速导航
                去第一篇文章!
                
看看
            
            
        
    )
}

Link快速导航标签式导航文档

使用Link 代替a标签。
原理：Link组件对链接进行劫持，当点击链接时，自动进行请求该链接资源，然后替换当前页面的样式和数据。

优点

• 页面不会刷新，利用ajax请求新页面内容，然后替换当前页面
• 不会请求后重复HTML,CSS,JS
• 自动在页面插入新内容，删除就内容
• 省略很多请求和解析过程，所以速度极快

全局配置

• page目录下进行_app.js 文件，export default function App ,是每个页面的根组件
• 切换页面是App不销毁，App里面的子组件会销毁
• App可保存全局状态

// page/_app.js
import React from "react";
import Head from "next/head";
import "styles/global.css"  // 全局样式，不会销毁
import png from "static/img/kk.png"

export default function App({Component, pageProps}) {
    return (
        

            
                
                
            
            
            
        
    )
}

总结

• 创建项目
  npm init next-app [项目名]

• 快速导航

xxx

• 同构代码

  • 一份代码，两端运行

• 全局组件

  • pages/_app.js

• 自定义head

  • 使用Head组件

• 全局CSS