Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Question

Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Currently, I am facing a challenge with implementing dynamic paths in NextJS and I'm struggling to find a solution. Let me provide some context for better understanding.

I am working on developing an ecommerce application using NextJS, and the folder structure looks like this: Home / [ShopID] / Categories / [CategoryName] / [ProductName]

The MongoDB setup is structured as follows:

{ShopID: <given mongodb id>,
ShopName: <Shop Name>
ShopCategories: {
Category1: {
CategoryDetails: <Pairs for category name, id, etc>,
CategoryProducts: {
Product1:{
ProductDetails: <Pairs for product name, id, etc>,}
}}}}

My aim is to create a version of the website where shop owners can easily add categories, products, and manage their store smoothly.

The desired functionality includes:

"//" = Clicking a button on the home page to navigate to /[ShopID] from the database (initially set up as a button without authentication), leading to a dashboard page. "/[ShopID]" = Dashboard with buttons pointing to various sections such as "Categories and Products". Clicking it should redirect to "/[ShopId]/categories". "/[ShopID]/categories" = Display React Component Buttons for each category containing picture, name, etc. Clicking a category leads to "/[ShopID]/categories/[CategoryName]". "/[ShopID]/categories/[CategoryName]" = Contains React Component Buttons for each Product that direct to "/[ShopID]/categories/[CategoryName]/[ProductName]".

Here are snippets of the relevant current code:

"/"
<Link href=""><div><h1>To home</h1></div></Link>

Initially, I hardcoded the /[ShopID] Link paths as "/id" and need guidance on setting up the Link href="" properly.

"/[ShopID]"
import HomepageButton from "../../components/homepage/Homepage-Button"

<main className="maincontainer">
<HomepageButton item="home-category" label="Categories & Products"></HomepageButton>

...

I have encountered challenges with passing data down through components and structuring getStaticProps and Paths. How can I resolve these issues?

...

Any assistance or guidance on these matters would be highly appreciated. Feel free to ask if you have any questions.

javascript reactjs mongodb next.js

Answer 1

Answer №1

After realizing I could consult chat GPT, it ended up providing me with the solution I was looking for following some adjustments.

function ShopID({ item }){
const router = useRouter()
const {shopid} = router.query

const { shopCategories } = item.shopData

console.log(shopCategories)


return <Fragment>
    <h1>The shop place</h1>
    <h1>{shopid}</h1>
    <h2>{item.name}</h2>
</Fragment>
}

export default ShopID


export async function getStaticProps({ params }) {
// Establish connection to MongoDB database
const client = await MongoClient.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = client.db();

// Retrieve the item from MongoDB collection based on ID parameter
const id = new ObjectId(params.shopid);
const item = await db.collection('shops').findOne({ _id: id });

item._id = item._id.toString();

// Close MongoDB client
client.close();

// Return item as props
// return { props: { item } }

return {
    props: { item },
    revalidate: 1 // seconds before page regeneration
  };
  }


export async function getStaticPaths() {
// Establish connection to MongoDB database
const client = await MongoClient.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = client.db();

// Fetch all item IDs from MongoDB collection
const items = await db.collection('shops').find({}, { projection: { _id: 1 } }).toArray();

// Generate paths list based on item IDs
const paths = items.map((item) => ({
  params: { shopid: item._id.toString() },
}));

// Close MongoDB client
client.close();

// Return list of paths
return { paths, fallback: false };
}

Answer 2

After realizing I could consult chat GPT, it ended up providing me with the solution I was looking for following some adjustments.

function ShopID({ item }){
const router = useRouter()
const {shopid} = router.query

const { shopCategories } = item.shopData

console.log(shopCategories)


return <Fragment>
    <h1>The shop place</h1>
    <h1>{shopid}</h1>
    <h2>{item.name}</h2>
</Fragment>
}

export default ShopID


export async function getStaticProps({ params }) {
// Establish connection to MongoDB database
const client = await MongoClient.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = client.db();

// Retrieve the item from MongoDB collection based on ID parameter
const id = new ObjectId(params.shopid);
const item = await db.collection('shops').findOne({ _id: id });

item._id = item._id.toString();

// Close MongoDB client
client.close();

// Return item as props
// return { props: { item } }

return {
    props: { item },
    revalidate: 1 // seconds before page regeneration
  };
  }


export async function getStaticPaths() {
// Establish connection to MongoDB database
const client = await MongoClient.connect(process.env.MONGODB_URI, {
  useNewUrlParser: true,
  useUnifiedTopology: true,
});
const db = client.db();

// Fetch all item IDs from MongoDB collection
const items = await db.collection('shops').find({}, { projection: { _id: 1 } }).toArray();

// Generate paths list based on item IDs
const paths = items.map((item) => ({
  params: { shopid: item._id.toString() },
}));

// Close MongoDB client
client.close();

// Return list of paths
return { paths, fallback: false };
}

Discover how to generate nested dynamic routes in NextJS by linking to MongoDB data using the getStaticProps and getStaticPaths functions

Answer №1

Similar questions

Selenium unable to interact with Javascript pop-up box

Why is the console log not working on a library that has been imported into a different React component?

The MUIv5 and tss-react SSR problem persists: Difficulty in consistently managing style definitions due to ArrowFunctionExpression in CSS prop

Removing a parameter from a variable in jQuery and JavaScript

What could be causing my state not to change in Nextjs even though I followed the quick start guide for Easy Peasy?

Returning draggable elements to their original placement

What is the best way to correctly render several React components using a single index.js file?

Issues with the Diagonal HTML Map functionality

Customize the color of badges in React using Material-UI components

I am encountering an issue trying to create a Docker image featuring TypeScript

What is the most effective way to import a substantial static array in React for utilization in a select field?

Utilizing JavaScript text variables as hidden inputs

Having trouble retrieving custom headers in a react response

Error: Invalid connection string for ELF Lambda detected

In TypeScript, the catch block does not get triggered

Error: A SyntaxError was encountered due to a missing closing parenthesis after an argument list while writing JavaScript within PHP code

Encountering the error message "BarChart in react.js is not iterable"

Exploring ways to run tests on a server REST API using testem

Retrieve the current height of the iFrame and then set that height to the parent div

What is the best way to deliver hefty files to users? Utilize the node-telegram-bot-api