utilizing a reusable design in the nextjs directory for pages

Question

utilizing a reusable design in the nextjs directory for pages

If I have the following files in my /pages directory and want to utilize the same template for cats/[slug] and dogs/[slug] routes (excluding fish), what steps should I take? Currently, I am duplicating the file...

  index.js
  cats.js
  dogs.js
  fish.js
    /cats
      [slug].js
    /dogs
      [slug].js
    /fish
      [slug].js

next.js

Answer 1

Answer №1

One way to create a reusable component is by defining it in the components directory and then using it accordingly.

components/Pet.jsx

const Pet = () => {
  // write your component logic here
};

export default Pet;

pages/dogs/[slug].jsx

import Pet from '../components/Pet';

const Dog = () => {
  return (
    <Pet type="dog"
      {...otherProps}
    />
  );
};

export default Dog;

Answer 2

One way to create a reusable component is by defining it in the components directory and then using it accordingly.

components/Pet.jsx

const Pet = () => {
  // write your component logic here
};

export default Pet;

pages/dogs/[slug].jsx

import Pet from '../components/Pet';

const Dog = () => {
  return (
    <Pet type="dog"
      {...otherProps}
    />
  );
};

export default Dog;

Answer 3

Answer №2

Although this question may be dated, a solution is to utilize "Dynamic Routes." Predefined routes take precedence over dynamic routes in this case. To make dynamic routes compatible with statically generated pages, the slug page must specify a list of paths using getStaticPaths.

To ensure a unique page under fish, you must explicitly define that page or set up a different "[slug]" page under a fish directory.

Hence, cats.js, dogs.js, fish.js will render at domain.com/cats/, domain.com/dogs/, domain.com/fish/. Dynamic routes will match at domain.com/cats/athing/, domain.com/dogs/anotherthing/, domain.com/fish/anythingelse/, etc...

getStaticPaths requires two parameters matching the name of the dynamic path directory and slug.

Create a "dynamic" directory at the top level of the pages directory for the animal route and include the slug inside like:

[animal]/[slug].js

The structure should resemble this in the pages directory:

 index.js
 cats.js
 dogs.js
 fish.js
 [animal]/[slug].js

In [slug].js, getStaticPaths needs to pass both the [animal] and [slug] values to create content only accessible under specific top-level pages.

A simplified static example could be:

export async function getStaticPaths() {
  return {
    paths: [
        { params: { animal: 'cats', slug: 'athing' } },
        { params: { animal: 'dogs', slug: 'anotherthing' } },
        { params: { animal: 'fish', slug: 'anythingelse' } }
    ],
    fallback: false, // can also be true or 'blocking'
  }
}

An example in Typescript with data fetching might look like this, where getAllSlugPathsWithAnimal returns an array of objects as follows:

{ animal: 'dogs', slug: 'anotherthing'}

export const getStaticPaths: GetStaticPaths = async () => {
  const slugPathsWithAnimal: AllSlugPathsWithAnimal[] = await getAllSlugPathsWithAnimal();

  const paths = slugPathsWithAnimal.map((slugAndAnimal) => ({
    params: { animal: slugAndAnimal.animal, slug: slugAndAnimal.slug },
  }));

  return {
    fallback: false,
    paths,
  };
};

For more information on dynamic routes: https://nextjs.org/docs/routing/dynamic-routes For details on data fetching: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

Answer 4

Although this question may be dated, a solution is to utilize "Dynamic Routes." Predefined routes take precedence over dynamic routes in this case. To make dynamic routes compatible with statically generated pages, the slug page must specify a list of paths using getStaticPaths.

To ensure a unique page under fish, you must explicitly define that page or set up a different "[slug]" page under a fish directory.

Hence, cats.js, dogs.js, fish.js will render at domain.com/cats/, domain.com/dogs/, domain.com/fish/. Dynamic routes will match at domain.com/cats/athing/, domain.com/dogs/anotherthing/, domain.com/fish/anythingelse/, etc...

getStaticPaths requires two parameters matching the name of the dynamic path directory and slug.

Create a "dynamic" directory at the top level of the pages directory for the animal route and include the slug inside like:

[animal]/[slug].js

The structure should resemble this in the pages directory:

 index.js
 cats.js
 dogs.js
 fish.js
 [animal]/[slug].js

In [slug].js, getStaticPaths needs to pass both the [animal] and [slug] values to create content only accessible under specific top-level pages.

A simplified static example could be:

export async function getStaticPaths() {
  return {
    paths: [
        { params: { animal: 'cats', slug: 'athing' } },
        { params: { animal: 'dogs', slug: 'anotherthing' } },
        { params: { animal: 'fish', slug: 'anythingelse' } }
    ],
    fallback: false, // can also be true or 'blocking'
  }
}

An example in Typescript with data fetching might look like this, where getAllSlugPathsWithAnimal returns an array of objects as follows:

{ animal: 'dogs', slug: 'anotherthing'}

export const getStaticPaths: GetStaticPaths = async () => {
  const slugPathsWithAnimal: AllSlugPathsWithAnimal[] = await getAllSlugPathsWithAnimal();

  const paths = slugPathsWithAnimal.map((slugAndAnimal) => ({
    params: { animal: slugAndAnimal.animal, slug: slugAndAnimal.slug },
  }));

  return {
    fallback: false,
    paths,
  };
};

For more information on dynamic routes: https://nextjs.org/docs/routing/dynamic-routes For details on data fetching: https://nextjs.org/docs/basic-features/data-fetching/get-static-paths

utilizing a reusable design in the nextjs directory for pages

Answer №1

Answer №2

Similar questions

Tips for maintaining i18n locale slugs and ensuring i18n consistency when reloading in Next.js

Fetch data from Firestore when the page loads using the useEffect hook

What are the steps to deploy a React, Next.js, and Express.js application on Netlify?

No data is being retrieved by SWR

Is NextJS rendering solely on the server, or is it capable of rendering on both

What is the correct way to use getServerSideProps?

Encountered an error during the production build of NEXTJS, where it panicked due to the global thread pool not being initialized

Utilizing client-side properties in an onClick event within Next.js framework

Dates comparison causing Firestore security rules issue

Is it possible to incorporate a next.js image onto the background design?

What is the syntax for utilizing cookies within the `getServerSideProps` function in Next.js?

Guide to finding and saving email addresses from a string output: extracting and storing each one individually in a text file

Switch the visibility of a div tag using Next.js

nextAuth.js is failing to access the accessToken, returning only the values {iat, exp, jti} instead

Guide to utilizing a JWT token within an httpOnly cookie for accessing a secured API endpoint

What steps do I need to take to ensure NextJS stores my edits in VSCode?

Runtime.UnhandledPromiseRejection - Oops! Looks like we're trying to read properties of something that doesn't exist (specifically 'headers')

What is the best way to initialize a value asynchronously for React context API in the latest version of NextJS, version

Unlocking the contents of an array from a separate file in Next.js

"Encountering difficulties while trying to modify the QuillNoSSRWrapper value within a Reactjs