getServerSideProps breaks routing in NextJS/Capacitor - reactjs

Question

I use the following method to avoid exporting getServerSideProps when building with nextjs:
export const getServerSideProps = process.env.SKIP_SSR ? undefined : async (ctx) => { ... }
And I build with:
"build:ios": "SKIP_SSR=1 next build && SKIP_SSR=1 next export && npx cap copy ios",
This works really well except that when exported and run as an iOS app navigations do not work.
To make it as simple as possible, I have added this in pages/index.tsx:
if(!route.asPath.startsWith('/p/home'))
route.push('/p/home')
return (
<div className={styles.container}>
I am here in the root page {window.location.href}
</div>
)
Which is outputting: "I am here in the root page capacitor://localhost/p/home"
The page I want to see rendered is actually in /p/home/index.tsx but what renders is pages/index.
I found out the cause of this is getServerSideProps, even though I skip ssr somehow it's getting through on the build and breaking routing in Capacitor.
If I comment out getServerSideProps it runs fine.
Is there a way to properly remove getServerSideProps when doing a build?

Answer 1

I was encountering the same problem and solved it using a webpack plugin preprocessor-loader.
Install webpack-preprocessor-loader to devDepencies
$ yarn add -D webpack-preprocessor-loader
Set webpack config
// next.config.js
module.exports = {
webpack: (config) => {
config.module.rules.push({
test: /\.tsx$/,
use: [
{
loader: 'webpack-preprocessor-loader',
options: {
params: {
// handle this bool parameter via env
isWeb: process.env.IS_WEB,
},
},
},
],
})
return config
}
}
Write #!if and #!endif comment around getServerSideProps
// yourpage.tsx
import { GetServerSidePropsContext, InferGetServerSidePropsType, NextPage } from 'next'
type PropsType = InferGetServerSidePropsType<typeof getServerSideProps> | undefined
const Page: NextPage<PropsType> = (props) => { /* your page component */ }
// #!if isWeb
export const getServerSideProps = async (context) => {
return {
props: yourProps
}
}
// #!endif
export default Page
Set environment variables according to the target of the build and perform the build.
// package.json
{
"scripts": {
"build:web": "IS_WEB=true next build",
"build:native": "next build && next export && cp -R ./public/* ./out"
}
}