Search code examples
reactjsnext.jsserver-side-renderingvercel

Website not rendering properly on next.js for mobile

I downloaded a website template online and I didn't like the implementation to converted to TS and a next project so that it could easily be deployed to Vercel. However, when I put it in mobile mode on Chrome dev tools this happens: website picture

The entire website is pushed to the left half of the screen.

This is not a responsive issue because when I shrink the size on normal desktop view it works perfectly

desktop small screen view

I have tried setting HTML width to 100% and 100vh and every CSS trick in the book. I am convinced that it is an issue with server-side rendering because there are flashes where the website is rendering properly e.g. after a 500 error it works fine and then after I refresh the page it returns the half view.

next.config.js::

module.exports = {
  reactStrictMode: true,
};

next-env.d.ts:

/// <reference types="next" />
/// <reference types="next/types/global" />
/// <reference types="next/image-types/global" />

_app.tsx:

import type { AppProps } from "next/app";
import "../core/scss/style.scss";

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}
export default MyApp;

_document.tsx:

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  // @ts-ignore
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    console.log(initialProps);
    return { ...initialProps };
  }
  render() {
    return (
      <Html>
        <Head />
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

package.json:

"dependencies": {
    "@chakra-ui/react": "^1.6.5",
    "@emotion/react": "^11",
    "@emotion/styled": "^11",
    "@fortawesome/fontawesome-svg-core": "^1.2.35",
    "@fortawesome/free-solid-svg-icons": "^5.15.3",
    "@fortawesome/react-fontawesome": "^0.1.14",
    "classnames": "^2.3.1",
    "formik": "^2.2.9",
    "framer-motion": "^4",
    "history": "^5.0.0",
    "next": "11.0.1",
    "node-sass": "4.12.0",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-intersection-observer": "^8.32.0"
  },
  "devDependencies": {
    "@types/react": "17.0.15",
    "eslint": "7.31.0",
    "eslint-config-next": "11.0.1",
    "typescript": "4.3.5"
  }

Env: Mac-OS Big Sur Browser Chrome

Solution

  • Check if some block has white-space: nowrap and it overflows horizontally, producing this issue.