初步学习next.js-7-打包
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start -p 80"
},
如果引入antd的样式，打包会报错！删除按需引入的antd样式
在page目录下，新建一个_app.js文件，_app.js文件为约定的全局目录
import App from 'next/app'
import 'antd/dist/antd.css'
export default App
这样配置一 ...
初步学习next.js-6-使用antd
首先需要让next支持css文件
yarn add @zeit/next-css
建立一个next.config.js
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
require.extensions['.css']=file=>{}
}
module.exports = withCss({})
加载ANTD
yarn add antd
因为直接引入，包很大，所以要按需引入
ya ...
初步学习next.js-5-编写css样式和lazyloading
CSS
import React, {useState} from 'react'
function Jspang(){
//关键代码----------start-------
const [color,setColor] = useState('blue')
const changeColor=()=>{
setColor(color=='blue'?'red':'blue')
}
//关键代码----------end-------
return (
<>
...
初步学习next.js-4-在getInitialProps中用axios获取数据
yarn add axios
import axios from 'axios'
const Page = ({ stars }) =>
<div>
Next stars: {stars}
</div>
Page.getInitialProps = async ({ req }) => {
const res = await fetch('https://api.github.com/repos/zeit/next.js')
const json = await res.json()
return { stars: json.stargazers_cou ...
初步学习next.js-3-6个路由钩子
import React from 'react'
import Link from 'next/link'
import Router from 'next/router'
const Home = () => {
function gotoXiaojiejie(){
Router.push({
pathname:'/xiaojiejie',
query:{
name:'井空'
}
})
}
Router.events.on('routeChangeStart',(...args)=>{
...
初步学习next.js-2-组件，路由，传递参数
pages和components
1.直接在根目录下的pages文件夹下，新建一个jsyang.js页面，启动后 访问路径为/jsyang
2.在根目录下新建文件夹components,新建组件com1.js文件，
export default ({children})=><button>{children}</button>
在需要引入的页面中
import Com1 from '../components/com1'
&nb ...
初步学习next.js-1-新建项目
react和vue做的都是单页面应用
缺点：1.不适合SEO
2.启动慢
解决方案：next.js
参考技术胖的资料进行学习
https://jspang.com/detailed?id=51#toc21
1.手动创建next.js
创建文件夹
D:
mkdir NextDemo
npm init
安装所需要的安装包
yarn add react react-dom next
增加快捷键命令
"scripts": ...
next.js 添加 PWA 渐进式WEB应用(service-worker) 支持
去 github 搜索了一把，估计是我关键词不对，没找到比较牛逼的插件。然后去 nextjs 官方仓库搜索，发现了这个东东 https://github.com/vercel/next.js/tree/canary/examples/with-next-offline，瞄了一眼 package.json 发现了这个插件 next-offline，瞅了一眼自述文件，貌似就是本文需要的插件，折腾一把，最终给 http ...
基于 Next.js 和云开发 CMS 的内容型网站应用实战开发
作者简介：
董沅鑫，云开发 CloudBase 团队研发工程师，侧重于前端工程化、node 服务开发，业余时间出没在 xin-tan.com。
本文目录：
引言
总览
背景介绍
安装 CMS
使用 CMS 创建动态内容
项目搭建
获取 CMS 内容
自动构建与部署
最后
引言
随着腾讯云云开发能力的日渐完善，有经验的工程师已经可以独立完成一个产品的开 ...
前端教程丨手把手教你用 Next.js 搭建个人博客，从入门到吃鸡
React.js 是现今前端最火的应用框架之一，而 Next.js 正是 React.js 领域最优秀的服务端渲染框架之一。基本上，现在所有的前端主流形式，从服务端渲染 APP，静态站到桌面应用等，Next.js 都能胜任。
不论是国内还是国外，都有不少开发者和企业在使用 Next.js 开发网站，比如：
腾讯新闻移动端门口站腾讯网
大名顶顶 ...
云开发网站托管悄悄上线了 Next.js 的支持
我们知道部署web应用程序的最佳方式是作为静态HTML应用程序，因为他对搜索引擎很友好，速度快等等，这对我们写个人博客这样的小型网站无异于非常nice。如果你的应用可以作为静态HTML，那么可以试试Next.js。
它可以把一个应用程序作为静态页面导出，那么导出的静态页面怎么部署到静态托管呢？我们以云开发静态托管服务为例 ...
[Next.js] Consume Next.js API routes with the SWR library on the client-side
The cool thing about Next.js API routes is that we can directly consume the API endpoints from pages.
SWR is a nice tool for handling data loading state in React apps using hooks, and is a perfect companion for our Next.js application. In this lesson, we will learn how to use SWR - a data ...
快速迁移 Next.js 应用到函数计算
首先介绍下在本文出现的几个比较重要的概念：
函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息 参考。
Fun: F ...
blog frame has been finished
Day 2, the basic frame of my blog has been finished.
The next task is to add some js.
来源：https://www.cnblogs.com/mzi-mzi/p/12447767.html
next.js 集成css antd
next使用 @zeit/next-css 支持import css
安装：npm install --save @zeit/next-css || yarn add @zeit/next-css配置：
// next.config.js// next支持import css
const withCSS = require('@zeit/next-css')
module.exports = withCSS({
/* config options here */
})
next集成antd
安装：yarn add a ...
导航守卫。404页面设置
全局导航守卫：（在router.js中添加）
router.beforeEach((to,from,next)=>{
if(to.name!=='login'){
if(localStorage.getItem('userid')){
next()
}else{
next('login')
}
}else{
next()
}
})
组件内导航守卫：（在组件内添加）
beforeRouteEnter(to,form,next){
if(localStorage.ge ...
Next.js 配置接口跨域代理转发
使用 create-next-app 创建的 Next.js 项目配置接口跨域代理转发需要用到 custom server 功能。
先安装好 express 和 http-proxy-middleware
yarn add express http-proxy-middleware
在项目根目录下新建 server.js 文件，写 ...
Next.js搭建前端环境
（1）create-next-app就是Next.js的脚手架工具，
有了它可以直接一句命令就建立好项目目录和基本结构，省去了我们很多的麻烦。
如果你没有使用过create-next-app,可以先进行全局安装，安装如下：
npm install -g create-next-app
（2）安装好脚手架create-next-app后，创建我们的项目：
...
Next.js中使用antd组件
Next.js中不能直接使用css，需要我们自行解决：
一、先解决不能引入css，只能使用<style jsx>的问题
（1）需要安装 @zeit/next-css ： npm install --save @zeit/next-css
（2）安装成功，需要在根目录建立next.config.js
const withCss = require('@zeit/next-css')
if(typeof require !== 'undefined'){
...
next.config.js
const configs = {
// 编译文件的输出目录
distDir: 'dest',
// 是否给每个路由生成Etag
generateEtags: true,
// 页面内容缓存配置
onDemandEntries: {
// 内容在内存中缓存的时长（ms）
maxInactiveAge: 25 * 1000,
// 同时缓存多少个页面
pagesBufferLength: 2,
},
// 在pages目录下那 ...
