Nextjs Build Error: Export encountered errors on following paths /users/[userid]

Question

i have created a nextjs app, i'm getting data from an express server deployed on netlify. i have created two pages, the first to display a list of users (i've got the users with getServerSideProps() function) and the second page is when you click on a user, you'll be redirected to the user profile (i've got the user's data with getStaticProps() and getStaticPaths() functions).

On localhost everything works fine.

But when i've tried to deploy the app on Netlify, i got this error while building it:

> Build error occurred 11:24:20 PM: Error: Export encountered errors on following paths /users/[userid]

The users list file:

import styles from "../../styles/Home.module.css";
import Link from "next/link";

export default function Users({ users }) {
  return (
    <div className={styles.container}>
      {users.map((user) => (
        <Link href={`/users/${user._id}`} key={user._id}>
          {user.firstname}
        </Link>
      ))}
    </div>
  );
}

export async function getServerSideProps() {
  const res = await fetch("https://***************/api/users");
  const users = await res.json();

  return { props: { users} };
}

The profile file:

import React from "react";

export default function singleUser({ user }) {
  return (
    <div>
      <h1>Hello {user.firstname}!</h1>
    </div>
  );
}

export async function getStaticPaths() {
  const res = await fetch("https://***************************/api/users");
  const users = await res.json();

  const paths = users.map((user) => ({
    params: { userid: user._id },
  }));

  return { paths, fallback: true };
}

// This also gets called at build time
export async function getStaticProps({ params }) {
  const res = await fetch(`https://**********************/api/users/${params.userid}`);
  const user = await res.json();

  return { props: { user: user || {} }, revalidate: 3600 };
}

You can't use `getServerSideProps` when exporting the app as static HTML because the method requires a running server. Try moving the user logic to the client-side code inside your `Users` component. — juliomalves, Jul 16 '21 at 16:23
I did this: `export default function Users() { const [users, setUsers] = useState(null); const getUsers = async () => { const res = await fetch( "http://***********************/api/users" ); const users = await res.json(); setUsers(users); }; useEffect(() => { getUsers(); }, []); return (
{users && users.map((el) => ( {el.firstname} ))}
); }` — Elon Conner, Jul 17 '21 at 00:30

Nextjs Build Error: Export encountered errors on following paths /users/[userid]

0 Answers0