next.js

MaterialUI together with styled-components, SSR

由 核能气质少年 提交于 2021-01-28 05:22:37
问题 I'm building a new project with SSR using Next.js, MaterialUI and styled-components. From what I know, MaterialUI uses JSS as a tool for SSR (according to the example in its repository). I wonder if anyone knows how I can make it work with styled-components. I opened issues in MaterialUI and styled-components repositories, both authors answered me that they don't know how to make it work together. But probably anyone did it already? Or at least can tell me where to dig to solve this problem.

Next.js render app inside html markup coming as string

由 China☆狼群 提交于 2021-01-28 03:15:38
问题 I need to build my Next.js app inside a third-party html markup. The markup is given as follows: header.txt <html> <head> <title>Some title</title> </head> <body> <header>Some header</header> <div> footer.txt </div> <footer>Some footer</footer> </body> </html> This files are dynamically generated into a folder. When I render my next.js application, I need to wrap them around my application. I created a working example using the package called: html-react-parser I parse the markup from the

Using Next.js how to add a class to body or _next div during SSR?

由 孤者浪人 提交于 2021-01-28 01:31:57
问题 I have a use case where I have to add a class to a root element may it be body or _next during SSR. The class needs to be added conditionally/dynamically based on getInitialProps responses. I want to know if such is possible in the current state of Next.js. 回答1: import React from 'react'; import NextDocument, {Html, Head, Main, NextScript} from 'next/document'; class Document extends NextDocument { static async getInitialProps(ctx) { const initialProps = await NextDocument.getInitialProps(ctx

How to replicate next js “public” folder behaviour with webpack?

由 余生颓废 提交于 2021-01-28 01:18:40
问题 Next js recently added public folder functionality which in its essence resolves urls like these: background-image: url(/images/test.png); <img src="/images/test.png" />; require("/images/test.png") From wherever you are in your source code to a public directory located at the root of your project. I am trying to replicate this in a non next js project that uses webpack, I initially played with publicPath property, but I'm either missing something or this is not how its done. Hence the

getServerSideProps and mysql (RowDataPacket)

由 爷，独闯天下 提交于 2021-01-27 16:29:53
问题 I'd like to do server side rendering with Next.js using the getServerSideProps method like explained in the docs. The data should come from a database, so I'm using the mysql package. This results in the following error: Error serializing `.assertions[0]` returned from `getServerSideProps` in "/assertion". Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types. I think the reason for this is, because the query method from mysql

getServerSideProps and mysql (RowDataPacket)

由 拈花ヽ惹草 提交于 2021-01-27 16:28:42
问题 I'd like to do server side rendering with Next.js using the getServerSideProps method like explained in the docs. The data should come from a database, so I'm using the mysql package. This results in the following error: Error serializing `.assertions[0]` returned from `getServerSideProps` in "/assertion". Reason: `object` ("[object Object]") cannot be serialized as JSON. Please only return JSON serializable data types. I think the reason for this is, because the query method from mysql

How do I omit the html extension in next.js?

由 蹲街弑〆低调 提交于 2021-01-27 15:55:36
问题 I'm building a static site using next.js, and I want my website.com/about.html to work just as: website.com/about -- I'm not sure why it's forcing me to type .html . Even if I structure my project: pages/about/index.js -- it generates a about.html instead of about/index.html on the static site. 回答1: I found the answer on next's website: module.exports = { exportTrailingSlash: true, } https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash 回答2: module.exports

React/Next.js site doesn't load properly in Safari (blank page)

由 断了今生、忘了曾经 提交于 2021-01-27 12:53:19
问题 I know this is very general but I have a bug in my Next.js website, where when I open my site in Safari, it sometimes loads and sometimes doesn't (almost 50/50 chance - shows a blank page, but I can see outlines of some of my components, no text though). It happens on both iOS/macOS versions of Safari. I read about Cache-Control headers which apparently cause Safari trouble when trying to load the page, but I tried those solutions and they didn't work for me (e.g. setting headers like so res

How can I make my nextjs with Express site work on ssl

由 你。 提交于 2021-01-27 10:20:00
问题 We have a site running on Next.js and Express. This is on a cPanel server with Aapche and together with nginx serving as reverse proxy. I need to have ssl on the site. But I am quite confuused with how the configurations should be. My server.js : const express = require('express') const next = require('next') const https = require('https'); const fs = require('fs'); //const forceSSL = require('express-force-ssl') var ssl_options = { key: fs.readFileSync('/home/myreactsite.key'), cert: fs

How can I make my nextjs with Express site work on ssl

由 [亡魂溺海] 提交于 2021-01-27 10:18:52
问题 We have a site running on Next.js and Express. This is on a cPanel server with Aapche and together with nginx serving as reverse proxy. I need to have ssl on the site. But I am quite confuused with how the configurations should be. My server.js : const express = require('express') const next = require('next') const https = require('https'); const fs = require('fs'); //const forceSSL = require('express-force-ssl') var ssl_options = { key: fs.readFileSync('/home/myreactsite.key'), cert: fs
订阅 next.js