[Vssue]react-nextjs - Githubissues

shenghy commented 5 years ago

https://jspang.com/posts/2019/09/01/react-nextjs.html

ZTH520 commented 5 years ago

前排打卡，加油！

shenghy commented 5 years ago

@ZTH520

前排打卡，加油！

谢谢你的支持，非常感谢。我会继续努力出更多更好的视频。

Siwuji commented 5 years ago

打卡，加油胖哥！

zcy270 commented 5 years ago

之前基础那边有一个key="item+index"说后面会讲的，怎么没了啊

zmj0920 commented 5 years ago

Next.js vscode 代码提示插件有吗

shenghy commented 5 years ago

@zmj0920

Next.js vscode 代码提示插件有吗

其实你可以直接用React的提示插件的，也管用。没必要非使用Next.js的，我也没使用。不过我会这几天关注一下，看看有没有值得推荐的。

shenghy commented 5 years ago

@zcy270

之前基础那边有一个key="item+index"说后面会讲的，怎么没了啊

非常抱歉，这个可能是我遗漏了，有机会我会补上这部分内容的。

shenghy commented 5 years ago

@Siwuji

打卡，加油胖哥！谢谢你的支持，一起努力加油

lifengsbotlp commented 5 years ago

这个问题我就很费解了，按照胖哥的代码来的，编译就报错了，这个报错也很不友好，请教胖哥，这个是啥问题啊？？

源代码

import React, { useState } from 'react'
const Home = props => {
  const [color, setColor] = useState('blue')
  const changeColor = () => {
    setColor(color == 'blue' ? 'red' : 'blue')
  }
  return (
    <>
      <div>技术胖免费前端教程</div>
      <div>
        <button onClick={changeColor}>改变颜色</button>
      </div>
      <style jsx>
        {`
          div {
            color: ${color};
          }
        `}
      </style>
    </>
  )
}
export default Home

报错

PS D:\My\next-react> yarn dev
yarn run v1.15.0
warning ..\..\..\package.json: No license field
$ next dev
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ event ] client pings, but there's no entry for page: /_error
[ event ] build page: /next/dist/pages/_error
[ wait ]  compiling ...
[ ready ] compiled successfully - ready on http://localhost:3000
[ event ] build page: /
[ wait ]  compiling ...
[ error ] ./pages/index.js 42:53
Module parse failed: Bad escape sequence in untagged template literal (42:53)
File was processed with these loaders:
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
|     dynamic: [color],
|     __self: this
>   }, `div.__jsx-style-dynamic-selector{color:${color};}
| /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIkM6XFxVc2Vyc1xcdXNlclxcRGVza3RvcFxcTXlcXG5leHQtcmVhY3RcXHBhZ2VzXFxpbmRleC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFhUyxBQUdnRCxtQ0FDckMiLCJmaWxlIjoiQzpcXFVzZXJzXFx1c2VyXFxEZXNrdG9wXFxNeVxcbmV4dC1yZWFjdFxccGFnZXNcXGluZGV4LmpzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IFJlYWN0LCB7IHVzZVN0YXRlIH0gZnJvbSAncmVhY3QnXG5jb25zdCBIb21lID0gcHJvcHMgPT4ge1xuICBjb25zdCBbY29sb3IsIHNldENvbG9yXSA9IHVzZVN0YXRlKCdibHVlJylcbiAgY29uc3QgY2hhbmdlQ29sb3IgPSAoKSA9PiB7XG4gICAgc2V0Q29sb3IoY29sb3IgPT0gJ2JsdWUnID8gJ3JlZCcgOiAnYmx1ZScpXG4gIH1cbiAgcmV0dXJuIChcbiAgICA8PlxuICAgICAgPGRpdj7mioDmnK/og5blhY3otLnliY3nq6/mlZnnqIs8L2Rpdj5cbiAgICAgIDxkaXY+XG4gICAgICAgIDxidXR0b24gb25DbGljaz17Y2hhbmdlQ29sb3J9PuaUueWPmOminOiJsjwvYnV0dG9uPlxuICAgICAgPC9kaXY+XG4gICAgICA8c3R5bGUganN4PlxuICAgICAgICB7YFxuICAgICAgICAgIGRpdiB7XG4gICAgICAgICAgICBjb2xvcjogJHtjb2xvcn07XG4gICAgICAgICAgfVxuICAgICAgICBgfVxuICAgICAgPC9zdHlsZT5cbiAgICA8Lz5cbiAgKVxufVxuZXhwb3J0IGRlZmF1bHQgSG9tZVxuIl19 */
| /*@ sourceURL=C:\Users\user\Desktop\My\next-react\pages\index.js */`));
[ event ] disposing inactive page(s): /next/dist/pages/_error, /
[ ready ] compiled successfully - ready on http://localhost:3000

GYxiaOZ commented 5 years ago

https://github.com/zeit/next.js/blob/canary/examples/with-ant-design/README.md 关于antd打包，next官方有一个例子而且照着胖哥的写法会报错

TronSun commented 5 years ago

你好请教一个问题如果我用less可以吗？我看next官网有@zeit/next-less这个功能，直接用在页面中是可以的，但是和antd-design一起用的时候会不显示 antd组件的默认UI，请问能解决一下吗？谢谢了

Rocco-Lt commented 5 years ago

胖哥我目前就是用的next.js，因为getInitialProps获取数据都是从服务器里端发送请求的，此时我有一个请求需要传入token（但是token是在存在浏览器的cookie中），我可以拼接在浏览器地址带过来，但是不怎么好，我如今只能在componentDidMount里面发请求，但是数据首次render的时候，数据列表是空的，只有等到其你去玩才会有数据，这就造成了我界面一开始出现的是无数据的界面