GetServersideProps断开NextJ/电容器中的路由

发布于 2025-01-27 11:00:52 字数 854 浏览 2 评论 0原文

我使用以下方法来避免使用NextJS构建时导出GetServersideProps：

export const getServerSideProps = process.env.SKIP_SSR ? undefined : async (ctx) => { ... }

我的构建：

"build:ios": "SKIP_SSR=1 next build && SKIP_SSR=1 next export && npx cap copy ios",

这确实很好，除了在导出并作为iOS应用程序导航运行时不起作用。

为了使其尽可能简单，我已经在页面/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>
  )

内容：“我在根页面电容器中：// localhost/p/home”

我想看到的页面实际上是在/p/home/index.tsx中，但是渲染的是页面/索引。

我发现原因是GetServersideProps，即使我以某种方式跳过了SSR，它正在通过电容器中的构建和破坏路由。

如果我评论getServersideprops，它运行良好。

是否有一种方法可以在进行构建时正确删除GetServersideProps？

原文

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?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梅倚清风 2025-02-03 11:00:52

我遇到了同样的问题，并使用webpack插件 preprocessor-loader-loader 。

install webpack-preprocessor-loader to devDepencies

$ yarn add -D webpack-preprocessor-loader

设置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 witr ＃！if and ＃！endif 围绕getserverversideprops

// 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的注释构建和执行构建。

// package.json
{
  "scripts": {
    "build:web": "IS_WEB=true next build",
    "build:native": "next build && next export && cp -R ./public/* ./out"
  }
}

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"
  }
}

回复收藏 0 原文

~没有更多了~