• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

202
Views
NextJS render content from a different page

I've two routes like,

app/products => pages/products/index.js
app/products/1 => pages/products/[page].js

Here both app/products and app/product/1 will render the same content (same product items), is it possible to render app/products/1 content in app/products without writing duplicate code? I could find anything similar in their documentation.

Thanks.

almost 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

The easiest way is to abstract the content from the page level. No need for tricky code here. pages/products/index.js:

import { ProductPageContent } from 'components/ProductPageContent';
import { getProductData } from 'lib/productData';

export default function ProductsIndexPage() {
  return <ProductPageContent />
}

export async function getStaticProps() {
  const productData = await getProductData();
  return {
     productData,
  }
}

pages/products/[page].js:

import { ProductPageContent } from 'components/ProductPageContent';
import { getProductData } from 'lib/productData';

export default function ProductPagePage() {
 return <ProductPageContent />
}

export async function getStaticProps() {
  const productData = await getProductData();
  return {
     productData,
  }
}
almost 3 years ago · Juan Pablo Isaza Report

0

you can create something like template.jsx somewhere in you project and just use this template in your index and [page]

almost 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error