LATEST UPDATE: So if you don’t mind doing it client side you can use the dynamic importing as suggested by a few people below. This will be for use cases where you use static page generation. i created a component which passes all the react-device-detect exports as props (it would be wise to filter out … Read more
Add ‘use client’; on top of the file where you are using handleClick because all components in Next 13 by default are server components, therefore for client side interactivity you need to use use client.
Answering my own question with the help of the answer I received on the NextJS discussions forum link here Basics of next build, start and export next build builds the production application in the .next folder. You need to run this command irrespective of whether you want to run next start or next export. After … Read more
If you are creating a dynamic page eg: product/[slug].tsx then even if you don’t want to create any page on build time you need to create a getStaticPaths method to set the fallback property and let NextJS know what to do when the page you are trying to get doesn’t exist. export const getStaticPaths: GetStaticPaths<{ … Read more
But then I read in the Next.js documentation that you should not use fetch() to all an API route in getServerSideProps(). You want to use the logic that’s in your API route directly in getServerSideProps, rather than calling your internal API. That’s because getServerSideProps runs on the server just like the API routes (making a … Read more
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
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
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
Here is another solution: https://github.com/ithkuil/angular-on-server wiki for details Update from author of that repo: that was about 6 years ago (at the time of this edit). At this point, people should probably be using https://angular.io/guide/universal or just https://prerender.io/
Lazy load the component and disable SSR: https://nextjs.org/docs/advanced-features/dynamic-import#with-no-ssr import dynamic from ‘next/dynamic’ const DynamicComponentWithNoSSR = dynamic(() => import(‘../components/List’), { ssr: false }) export default () => <DynamicComponentWithNoSSR />