next.js

Nextjs page goes to 404 on refresh

馋奶兔 提交于 2020-08-10 08:44:50
问题 I'm using nextjs and graphql for a shopify POC. I have a component that shows a list of products with links on them that point to the product page <Link as={`${handle}/product/${url}`} href={`/product?id=${item.id};`}> <a>{item.title}</a> </Link> handle is the collection name so the url in the browser will look like http://localhost:3000/new-releases/product/Plattan-2-Bluetooth but behind the scenes its really just using a page called products and i'm passing the product id. Now in product.js

腾讯云 Serverless 部署应用耗时降低了 73%

拜拜、爱过 提交于 2020-08-10 03:50:31
在使用 Serverless Framework 部署 Next.js,Egg.js 项目时,由于安装的依赖包过大,部署时压缩上传时间很长,可能出现上传超时、控制台卡死等问题。 为此,Serverless 团队近期对部署做了一个性能优化,原来部署一个 Next.js 的 Demo 项目大约需要 55s 左右,而现在只需要 18s 的时间。 下面我们一起看一下,优化前后部署方案哪些不同。 一、部署性能对比 本次提速主要做的是压缩上传性能的提升。优化后采用流式上传压缩,并直接在压缩包内注入组件代码,大大的提升了性能。选取三种不同大小的代码包进行测试,优化前后平均部署性能如下所示: 代码包大小(MB) 优化前(秒) 优化后(秒) 111 MB 55 s 18 s 216 MB 100 s 38 s 418 MB 185 s 70 s 可见,部署的整体性能提升了将近 3倍 !对于一个轻量级别的网站或博客( 200 MB 左右),每次部署只需要 35s 左右的时间! 二、CLI 控制台输出对比 在 CLI 控制台输入 sls deploy 命令后,CLI 控制台状态的对比,如下图所示: 优化前部署全流程仅有 deploying 状态,直到部署结束返回结果。优化后将部署流程的每一步实时反馈到控制台界面上,让用户更清晰的看到整个部署流程,也能方便定位问题(如本地网络问题导致上传失败)。

NextJs dynamic open graph meta tags not rendering for facebook debugger

雨燕双飞 提交于 2020-08-09 09:47:27
问题 I have tried to include meta tags using base "Head" feature of NextJs, react-helmet and next-seo packages.They all works fine on client side and show meta tags in inspect tool. But When I try to detect it using facebook debugger tool or any other open graph tags detector, it does not work. May be something to do with server side rendering of meta tags but I have not found enough material to implement server side meta tags in NextJs framework. 回答1: Are you using Redux Persist? Since there is a

NextJs dynamic open graph meta tags not rendering for facebook debugger

拈花ヽ惹草 提交于 2020-08-09 09:47:10
问题 I have tried to include meta tags using base "Head" feature of NextJs, react-helmet and next-seo packages.They all works fine on client side and show meta tags in inspect tool. But When I try to detect it using facebook debugger tool or any other open graph tags detector, it does not work. May be something to do with server side rendering of meta tags but I have not found enough material to implement server side meta tags in NextJs framework. 回答1: Are you using Redux Persist? Since there is a

How to implement SSR for Material UI's media queries in NextJs?

末鹿安然 提交于 2020-08-07 05:15:25
问题 I can't follow the documentation of implementing Material UI's media queries because it's specified for a plain React app and I'm using NextJs. Specifically, I don't know where to put the following code that the documentation specifies: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; import { ThemeProvider } from '@material-ui/core/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user

How to implement SSR for Material UI's media queries in NextJs?

左心房为你撑大大i 提交于 2020-08-07 05:14:04
问题 I can't follow the documentation of implementing Material UI's media queries because it's specified for a plain React app and I'm using NextJs. Specifically, I don't know where to put the following code that the documentation specifies: import ReactDOMServer from 'react-dom/server'; import parser from 'ua-parser-js'; import mediaQuery from 'css-mediaquery'; import { ThemeProvider } from '@material-ui/core/styles'; function handleRender(req, res) { const deviceType = parser(req.headers['user

Next Js application build

那年仲夏 提交于 2020-08-05 10:02:50
问题 I am trying to deploy the next js application in firebase. For which I have made firebase.json like, { "hosting": { "public": ".next", "ignore": [ "firebase.json", "**/.*", "**/node_modules/**" ], "rewrites": [ { "source": "**", "destination": "/index.html" } ] } } With assumption I have given .next as value for public but when running the app in firebase url, it says that the index.html file is missing like and hence throws page not found error, If I give dist then it throws error as there

Next.js: Reduce data fetching and share data between pages

情到浓时终转凉″ 提交于 2020-08-02 01:01:06
问题 I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons. The problem I have Right now I have a few pages that all include a component that displays som static content and a that have some dynamic content that is fetched from an API. Each page do a fetch() in their getInitialProps() to get their own page data, but also the footer data, which is the same for

Next.js: Reduce data fetching and share data between pages

大憨熊 提交于 2020-08-02 01:00:10
问题 I'm looking for solutions for better data fetching in a Next.js app. In this question I'm not just looking for a solution, I'm looking for multiple options so we can look at the pros and cons. The problem I have Right now I have a few pages that all include a component that displays som static content and a that have some dynamic content that is fetched from an API. Each page do a fetch() in their getInitialProps() to get their own page data, but also the footer data, which is the same for

Using react redux with next.js

坚强是说给别人听的谎言 提交于 2020-08-01 06:21:12
问题 I try to use Redux with next.js starter project and I installed next-redux-wrapper on to the project but I'm not sure where is the root file in this project. I try to follow the tutorial which shown on the next-redux-wrapper but no success. Nothing change. Please help me how to add Redux on to the project. Regards. 回答1: Next.js uses the App component to initialize pages. You can override it and control the page initialization. Although this demo is for next.js it should work for nextjs