next.js官方教程入门项目

先初始化一个项目

npm init next-app nectjs-blog-1

运行

yarn dev

创建/pages/posts/first-post.js文件，通过/posts/first-post来访问，不需要配置router，这是约定，约定大于配置，这是来自Rails的理念。

Link快速导航

点击跳转 
改成
点击跳转

优点：

• 页面不会刷新，用Ajax请求新页面内容
• 不会请求重复的HTML、CSS、JS
• 自动在页面插入新内容、删除旧内容

因此节省了很多请求和解析的过程，所以速度极快

代码运行在两端

同构代码：一份代码，两端运行(省了一份)

在组件里写一句console.log('执行了')

我们发现Node控制台和Chrome控制台都输出了这句话

但是要注意，不是所有的代码都会是这样。
有些需要用户触发的比如onclick，
或者由于API的平台特异性，例如window会在node里报错。

全局配置

自定义head

使用

• 改变指定页面 title
• 改变指定页面 meta:viewport

import React, {useCallback} from "react";
import Link from 'next/link'
import Head from "next/head";

console.log('执行了')

export default function X() {
    const clickMe = useCallback(() => {
        console.log('you clicked me')
    }, [])
    return (
        // 不能这样写，因为React规定只能有一个根组件
        // 
        //     
        // 
        // 

        //     First Post click me
        //     

        //     回到首页 点击这里
        // 

        // <> === 
        <>
             
                 
                 
             
             

                 First Post click me
                 

                 回到首页 点击这里
             
        
    )
}

pages/_app.js

export default function App 是每个页面的根组件
页面切换时App不会销毁，App里面的组件会销毁
可以用App保存全局状态

如何改变全局title & meta:viewport?

// 在_app.js中配置
import '../styles/globals.css'
import Head from "next/head";

function MyApp({Component, pageProps}) {
    return 

        
            
            
        
        
    
}

export default MyApp

全局CSS

放在_app.js里，因为切换页面时App不会销毁，其他地方只能写局部css

import '../styles/global.css'

静态资源

next推荐放在public/里，但是我不是很赞同，因为如果放在public/里边就不支持改文件名，也就是不支持在文件后➕hash后缀，这样会导致文件无法更新。
而且文件没有加缓存就会导致CDN无力每次都要重新向服务器发送请求

nextjs无法处理png文件，我们可以查文档自己配置。

图片类型的文件我们可以配置file-loader或者直接使用next-images

SVG类型文件一部分可以当作图片使用，icon.svg要当作SVG Symbols使用，目前没有插件，只能自己配置

其它类型的文件自己查loader，然后配置进next.config.js，或者看看有没有人封装成next插件