[SOLVED] Nextjs build successful on netlify but site css not accessible

Nextjs build successful on netlify but site css not accessible

My Nextjs site builds without error on netlify. But the site looks like this and does not pick up the css. The console shows a syntax error Uncaught SyntaxError: Unexpected token '<'. The routing also does not work.

This site works fine when deployed to vercel. When I run npm run build and npm run start locally it works fine too. My scripts in package.json are as follows

  "scripts": {
    "dev": "next dev",
    "start": "next start",
    "build": "next build"
  },

Previously I was using next build && next export to build my site but now I need Incremental Static Regeneration which is not supported by next export.

My netlify deploy settings are as follows

When I use next export a link to any dynamic page that is not in getStaticPaths takes me to the home page. If I go to the url from inside the application, it works fine but a refresh takes me back to the home page. When I remove next export I am faced with the above issue in netlify.

my dynamic page code stripped down is as follows [tag].js

import Head from "next/head";
import SearchPage from "../../components/app/SearchPage/SearchPage";
import {
  fetchAllCuratedTopicsToRender,
  fetchTitleAndDescription,
} from "../../services/SearchService";

const Search = ({ title, meta_description }) => {
  const defaultTitle = "default title";
  const defaultMetaDescription = "default meta description";
  return (
    <>
      <Head>
        <title key="title">{title || defaultTitle}</title>
        <meta
          name="description"
          content={meta_description || defaultMetaDescription}
          key="description"
        />
      </Head>
      <SearchPage />
    </>
  );
};

export default Search;
// Generates all the paths for the curated topics stored in the database
export async function getStaticPaths() {
  const APIresponse = await fetchAllCuratedTopicsToRender();
  const allPaths = APIresponse.map((el) => {
    return { params: { tag: el.keyword } };
  });

  return {
    paths: [...allPaths],
    fallback: "blocking",
  };
}

export async function getStaticProps(context) {
  let titleAndDescription = {
    title: "",
    meta_description: "",
  };

  // only get title and description if there is a tag in the url
  if (context.params?.tag) {
    const tag = context.params.tag.toString();
    titleAndDescription = await fetchTitleAndDescription(tag);
  }

  return {
    props: {
      title: titleAndDescription.title || "",
      meta_description: titleAndDescription.meta_description || "",
    },
    revalidate: 31536000,
  };
}

Solution

This would be a case of you having a redirect rule like:

/* /index.html 200

in your public folder. Statically generated sites sometimes needed that for client-side only navigation, but it won't be needed if you're using server-side stuff (including ISR). The Netlify Next.js Runtime also warns about this in your build logs. Simply removing the rule should fix it.