Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

wangjiayan/next-github

Open more actions menu
 
 

Repository files navigation

教你玩转react、next、hooks 、koa、antd

前言

以下文章纯属个人理解,便于记录学习,肯定有理解错误或理解不到位的地方, 意在站在前辈的肩膀,分享个人对技术的通俗理解,共同成长!

官方网站:https://nextjs.org

中文官网:https://nextjs.frontendx.cn

API: https://developer.github.com/apps/building-oauth-apps/authorizing-oauth-apps/

项目体验地址 :http://www.taobaods.xin:5000

本项目使用Next.js开发 React 服务端渲染,因为当我们要做SEO优化时是一件很麻烦的事情, 常常需要配置很多繁琐的参数使我们开发增加难度,然而Next.js框架帮助我们解决了很多的配置问题, 使我们开发的时候变得简单本项目使用技术有 next react-hooks redux react-redux redux-thunk 服务端使用 koa redis

Author:君吟

Email: 506499594@qq.com

github: https://github.com/zmj0920/

运行

npm run dev

目录结构

├── components           非页面级共用组件
│   └── Layout.jsx       路由配置文件
├── lib                  一些通用的js
│   └── with-redux.js    继承redux
├── pages                页面级组件 会被解析成路由
│   └── _app.js          自定义 app配置
│   └── _document.js     自定义 document 配置
│   └── index.js         首页
├── server               服务端文件
│   └── auth.js          github auth 授权
│   └── session-store.js 使用redis缓存store 
├── static               静态资源
├── store                redux使用相关文件
├── test                 测试文件 
├── babelrc              babel 编译配置
├── gitignore            git不需要上传文件配置
├── next.config.js       next 相关配置
├── package.json         项目依赖配置文件
├── README.md            项目说明文件
├── server.js            服务端文件

安装依赖

    "@zeit/next-bundle-analyzer": "^0.1.2", //观察打包代码
    "@zeit/next-css": "^1.0.1", //支持css文件引入配置
    "antd": "^3.23.1",          // ui库使用
    "atob": "^2.1.2",           //对base64编码过的字符串进行解码
    "axios": "^0.19.0",         // 数据请求
    "babel-plugin-import": "^1.12.1",     //在编译过程中将 import 的写法自动转换为按需引入ui组件
    "github-markdown-css": "^3.0.1",      //  github-markdown 的样式美化
    "ioredis": "^4.14.0",                 //链接redis使用
    "koa": "^2.8.1",                      //koa框架
    "koa-body": "^4.1.1",                 
    "koa-router": "^7.4.0",
    "koa-session": "^5.12.3",
    "lru-cache": "^5.1.1",              //数据缓存
    "moment": "^2.24.0",                //日期格式化
    "next": "^9.0.5",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-redux": "^7.1.1",                //状态管理
    "redux": "^4.0.4",
    "redux-devtools-extension": "^2.13.8",   //监听redux状态调试工具 
    "redux-thunk": "^2.3.0",
    "styled-components": "^2.1.0"             //css 组件

ssr 流程

ssr渲染流程

About

react next koa redis antd

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.5%
  • Dockerfile 0.5%
Morty Proxy This is a proxified and sanitized view of the page, visit original site.