0

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,
  };
}
RamlahAziz
  • 47
  • 10

1 Answers1

1

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.

Hrishikesh Kokate
  • 1,065
  • 1
  • 8
  • 22