When you’re rendering on the server, you do not have a browser and thus you do not have access to all the APIs that the browser provides, including localStorage. In JavaScript code that is running both on the server and on the client (browser), it is common practice to guard against with an if clause … Read more
NEXT_PUBLIC is a new feature added. Before, in order to set up environment variables, we had to set up both server and client, separately. Environment variables that are placed in the .env file would be available only on the server-side, if you want to make your env variables available on the client-side you had to … Read more
Here is a npm library which can handle window, document and global object for you: Global. Then you can safely write: import window from ‘global’ const mySpecialWindowFunction = () => { return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase()); };
You can avoid calling your detection function in ssr by adding this code: // make sure your function is being called in client side only if (typeof window !== ‘undefined’) { // detect window screen width function } full example from your link: import { useState, useEffect } from ‘react’; // Usage function App() { … Read more
Create Server Side Response Service @Injectable({ providedIn: ‘root’ }) export class ServerSideResponseService { private response: Response constructor(@Optional() @Inject(RESPONSE) response: any) { this.response = response } setNotFound(message=”not found”): this { if (this.response) { this.response.statusCode = 404 this.response.statusMessage = message } return this } } and use it in Not Found Component @Component({ selector: ‘app-not-found’, templateUrl: ‘./not-found.component.html’, … Read more
You can get the cookies from the req.headers inside getServerSideProps: export async function getServerSideProps(context) { const cookies = context.req.headers.cookie; return { props: {}, }; } You could then use the cookie npm package to parse them: import * as cookie from ‘cookie’ export async function getServerSideProps(context) { const parsedCookies = cookie.parse(context.req.headers.cookie); return { props: {} … Read more
If you use fs, be sure it’s only within getInitialProps or getServerSideProps. (anything includes server-side rendering). You may also need to create a next.config.js file with the following content to get the client bundle to build: For webpack4 module.exports = { webpack: (config, { isServer }) => { // Fixes npm packages that depend on … Read more
Add JSON.stringify when calling an asynchronous function that returns an object. Try modifying your getStaticProps function like this. export async function getStaticProps() { const profiles = await getAllBusinessProfiles(); const allProfiles = JSON.stringify(profiles) return { props: { allProfiles } }; } The JSON.stringify() method converts a JavaScript object or value to a JSON string, optionally replacing … Read more
You should separate and extract your authentication logic from getServerSideProps into a re-usable higher-order function. For instance, you could have the following function that would accept another function (your getServerSideProps), and would redirect to your login page if the userToken isn’t set. export function requireAuthentication(gssp) { return async (context) => { const { req, res … Read more
Since the error was thrown during the import statement, I’d recommended using dynamic imports as explained in my other answer here. async mounted() { if (process.client) { const Ace = await import(‘ace-builds/src-noconflict/ace’) Ace.edit… } }, From the official documentation: https://nuxtjs.org/docs/2.x/internals-glossary/context EDIT: I’m not sure about Ace and it’s maybe a drastic change but you may … Read more