Answering my own question here for those who’re curious to know too.. I made a thread about it in NextJS and they gave me a good answer to this – here 2 ways of doing this is either by using readStream var filePath = path.join(__dirname, ‘myfile.mp3’); var stat = fileSystem.statSync(filePath); response.writeHead(200, { ‘Content-Type’: ‘audio/mpeg’, ‘Content-Length’: … Read more
You can use next/router to remove the query params in the URL. const router = useRouter(); router.replace(‘/about’, undefined, { shallow: true }); Use replace to prevent adding a new URL entry into the history (otherwise just use push), and shallow: true allows you to change the URL without running data fetching methods. This will cause … Read more
getRequestHandler vs render app.getRequestHandler returns a request handler which we can use to parse all HTTP requests. app.render checks if static assets need to serve. It also checks if the page requested is a blocked/internal page. After those checks pass, Next.js also use the same request handler that we will get from app.getRequestHandler. If we … Read more
You can do something like this: Use a variable in the state to prevent the page from being rendered Use componentDidMount to load data from localStorage When data is loaded, setState to allow component to be rendered. It’s a react issue, not a next.js issue. You could use Conditional rendering for step 1. Also read … Read more
Just add this to your next.config.js file and restart const path = require(‘path’) module.exports = { sassOptions: { includePaths: [path.join(__dirname, ‘styles’)], prependData: `@import “main.scss”;` } }
Give this a try _document.js import React from ‘react’; import Document, { Head, Main, NextScript } from ‘next/document’; import { ServerStyleSheet } from ‘styled-components’ import { ServerStyleSheets } from ‘@material-ui/styles’; import theme from ‘../src/theme’; class MyDocument extends Document { static async getInitialProps (ctx) { const styledComponentsSheet = new ServerStyleSheet() const materialSheets = new ServerStyleSheets() const … Read more
export async function getServerSideProps(context) { const { id } = context.query; const res = await fetch(`https://restcountries.eu/rest/v2/name/${id}`); const country = await res.json(); console.log(`Fetched place: ${country.name}`); return { props: { country } }; } you are returning a nested object from above function { props: { country:country } } so this prop will be attached to props … Read more
I’ve been having trouble with the same issue, mostly in Slider components. Basically, because the image is off-screen until the Slider moves it into view, there is a delay and it doesn’t show for a short time, which looks nasty. Solution: Add the sharp package. The problem comes from the default image processor that NextJS … Read more
router.push has a scroll option, it is true by default. You can turn it off like this: const router = useRouter(); async function navigate(newCurrency) { router.push({ pathname: router.pathname, query: { …router.query, currency: newCurrency.value }, }, undefined, { scroll: false }); } router.push accepts the most of (if not all) next/link‘s props in the options object. … Read more
You cannot use getServerSideProps in non-page components. You can either pass the prop from Home to HomeSection or create a context so the value can be available globally from the component tree getServerSideProps can only be exported from a page. You can’t export it from non-page files. https://nextjs.org/docs/basic-features/data-fetching#only-allowed-in-a-page-2