search

aws-amplify / amplify-hosting

AWS Amplify Hosting provides a Git-based workflow for deploying and hosting fullstack serverless web applications.
https://aws.amazon.com/amplify/hosting/
Apache License 2.0
459 stars 116 forks source link

Unable to Configure Dynamic Routing with Next JS Application #2119

Closed DevLukeHere closed 2 years ago

DevLukeHere commented 3 years ago

Before opening, please confirm:

JavaScript Framework

Next.js

Amplify APIs

Not applicable

Amplify Categories

Not applicable

Environment information

System: OS: macOS 11.5.1 CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz Memory: 296.79 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node Yarn: 1.22.5 - ~/.yarn/bin/yarn npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm Browsers: Chrome: 92.0.4515.107 Firefox: 89.0.2 Safari: 14.1.2 npmPackages: @ampproject/toolbox-optimizer: undefined () @babel/core: undefined () @date-io/date-fns: 1.x => 1.3.13 @fortawesome/fontawesome-svg-core: ^1.2.35 => 1.2.35 @fortawesome/free-brands-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/free-solid-svg-icons: ^5.15.3 => 5.15.3 @fortawesome/react-fontawesome: ^0.1.14 => 0.1.14 @material-ui/core: ^4.11.4 => 4.11.4 @material-ui/icons: ^4.11.2 => 4.11.2 @material-ui/lab: ^4.0.0-alpha.58 => 4.0.0-alpha.58 @react-google-maps/api: ^2.2.0 => 2.2.0 @sentry/nextjs: ^6.10.0 => 6.10.0 amphtml-validator: undefined () arg: undefined () async-retry: undefined () async-sema: undefined () aws-amplify: ^4.1.0 => 4.1.0 axios: ^0.21.1 => 0.21.1 babel-plugin-styled-components: ^1.13.2 => 1.13.2 (1.12.0) bfj: undefined () cacache: undefined () ci-info: undefined () comment-json: undefined () compression: undefined () conf: undefined () content-type: undefined () cookie: undefined () css-loader: undefined () date-fns: ^2.21.1 => 2.21.2 debug: undefined () devalue: undefined () escape-string-regexp: undefined () file-loader: undefined () find-cache-dir: undefined () find-up: undefined () fresh: undefined () gzip-size: undefined () html-react-parser: ^1.2.6 => 1.2.6 http-proxy: undefined () ignore-loader: undefined () is-animated: undefined () is-docker: undefined () is-wsl: undefined () json5: undefined () jsonwebtoken: undefined () loader-utils: undefined () lodash.curry: undefined () lru-cache: undefined () mini-css-extract-plugin: undefined () moment: ^2.29.1 => 2.29.1 nanoid: undefined () neo-async: undefined () next: ^11.0.1 => 11.0.1 next-redux-wrapper: ^6.0.2 => 6.0.2 ora: undefined () postcss-flexbugs-fixes: undefined () postcss-loader: undefined () postcss-preset-env: undefined () postcss-scss: undefined () react: 17.0.2 => 17.0.2 (16.14.0) react-dom: 17.0.2 => 17.0.2 react-google-recaptcha: ^2.1.0 => 2.1.0 react-material-ui-carousel: ^2.2.6 => 2.2.6 react-player: ^2.9.0 => 2.9.0 react-redux: ^7.2.3 => 7.2.3 react-share: ^4.4.0 => 4.4.0 react-slick: ^0.28.1 => 0.28.1 react-social-login: ^3.4.13 => 3.4.13 react-spring: ^9.1.1 => 9.1.1 react-swipeable-views: ^0.13.9 => 0.13.9 react-video-recorder: ^3.18.1 => 3.18.1 recast: undefined () redux-devtools-extension: ^2.13.9 => 2.13.9 redux-thunk: ^2.3.0 => 2.3.0 resolve-url-loader: undefined () sass-loader: undefined () schema-utils: undefined () semver: undefined () send: undefined () sendbird: ^3.0.150 => 3.0.150 slick-carousel: ^1.8.1 => 1.8.1 source-map: undefined () string-hash: undefined () strip-ansi: undefined () styled-components: ^5.3.0 => 5.3.0 styled-components/macro: undefined () styled-components/native: undefined () styled-components/primitives: undefined () swiper: ^6.6.2 => 6.6.2 swiper/a11y: undefined () swiper/autoplay: undefined () swiper/bundle: undefined () swiper/controller: undefined () swiper/core: undefined () swiper/effect-coverflow: undefined () swiper/effect-cube: undefined () swiper/effect-fade: undefined () swiper/effect-flip: undefined () swiper/hash-navigation: undefined () swiper/history: undefined () swiper/keyboard: undefined () swiper/lazy: undefined () swiper/mousewheel: undefined () swiper/navigation: undefined () swiper/pagination: undefined () swiper/parallax: undefined () swiper/react: undefined () swiper/scrollbar: undefined () swiper/svelte: undefined () swiper/thumbs: undefined () swiper/types: undefined () swiper/virtual: undefined () swiper/vue: undefined () swiper/zoom: undefined () swiper_angular: undefined () terser: undefined () text-table: undefined () ts_demo: 0.1.0 unistore: undefined () web-vitals: undefined () webpack: undefined () webpack-sources: undefined () with-typescript: undefined () npmGlobalPackages: npm: 6.14.13

Describe the bug

I have a Next JS application has been deployed onto Amplify, however, whenever I am trying to access a dynamic page for example: https://testing.com/companies/12345, it will throw me an error. Same goes for when I am trying to refresh a static page in my application.

Expected behavior

All dynamic routes should be able to be accessed and page refresh is possible.

Reproduction steps

  1. Yarn install
  2. Deploy onto Amplify via continuous deployment.

Code Snippet

An example of the code snippet for 1 of my dynamic route component.

import React from "react";
import AppBar from "../../components/shared/SharedNavbar/SharedNavbar";
import Toolbar from "@material-ui/core/Toolbar";
import SingleJobWrapper from "../../components/joblistpage/SingleJobWrapper/SingleJobWrapper";
import SharedChat from "../../components/shared/SharedChat/SharedChat";
import ToResolveClassNameError from "../../components/hoc/ToResolveClassNameError";
import SharedFooter from "../../components/shared/SharedFooter/SharedFooter";
import SharedJobHeader from "../../components/shared/SharedHeader/SharedJobHeader/SharedJobHeader";
import { getJobWithoutRedux } from "../../redux/actions/job_action";

function JobProfile({ id, job }) {
  return (
    <>
      <SharedJobHeader job={job} />
      <ToResolveClassNameError>
        <AppBar hideMiddleSearchBar={true} />
        <Toolbar />
        <SingleJobWrapper job_slug={id} />
        <SharedChat />
        <SharedFooter />
      </ToResolveClassNameError>
    </>
  );
}

export async function getStaticPaths() {
  let paths = [];

  return {
    paths: paths,
    fallback: "blocking"
  };
}

export async function getStaticProps({ params }) {
  const param = {
    jobId: params.id,
    canCancel: false
  };

  const job = await getJobWithoutRedux(param);

  return {
    props: { id: params.id, job: job },
    revalidate: 60 * 5
  };
}

export default JobProfile;

Log output

``` // Put your logs below this line ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

Some things to note for my application is that I am:

  1. using styled components and material UI.
  2. using next-redux-wrapper.
  3. using getStaticPath with fallback: 'blocking' as we want ssr for dynamic routing.
  4. using yarn instead of npm.

The document.js file is as follows:

import React from "react";
import NextDocument from "next/document";
import { ServerStyleSheet as StyledComponentSheets } from "styled-components";
import { ServerStyleSheets as MaterialUiServerStyleSheets } from "@material-ui/core/styles";

export default class Document extends NextDocument {
  static async getInitialProps(ctx) {
    const styledComponentSheet = new StyledComponentSheets();
    const materialUiSheets = new MaterialUiServerStyleSheets();
    const originalRenderPage = ctx.renderPage;
    try {
      ctx.renderPage = () =>
        originalRenderPage({
          enhanceApp: (App) => (props) =>
            styledComponentSheet.collectStyles(
              materialUiSheets.collect(<App {...props} />)
            )
        });
      const initialProps = await NextDocument.getInitialProps(ctx);
      return {
        ...initialProps,
        styles: [
          <React.Fragment key="styles">
            {initialProps.styles}
            {materialUiSheets.getStyleElement()}
            {styledComponentSheet.getStyleElement()}
          </React.Fragment>
        ]
      };
    } finally {
      styledComponentSheet.seal();
    }
  }
}
ferdingler commented 3 years ago

Hi @lukewzk, apologies for the delay on this ticket. Were you able to figure out your issue? It seems like a very basic usecase that should definitely work on Amplify. I don't see anything in your setup that stands out. Let us know if you are still having problems.

github-actions[bot] commented 2 years ago

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.