Is it possible to create a system in NextJS that utilizes either the path or the query parameter?

Question

Is it possible to create a system in NextJS that utilizes either the path or the query parameter?

Due to historical reasons, there is a need to maintain a blog link structure that resembles /blog?article=id-of-article. However, the goal is to implement pre-rendering with NextJS and have the blog URL appear as /blog/id-of-article.

What is the most effective approach to accommodate this scenario? One option is to set up a permanent redirect or ensure that both URLs lead to the same page. As a newcomer to NextJS, I am uncertain about the best course of action.

Any advice or guidance on how to proceed would be greatly appreciated!

javascript next.js

Answer 1

Answer №1

Check out my solution below.

//src/routes/index.js
export async function getServerSideProps(context) {

    const { query } = context;
    console.log(query);

    if (query.post) {
        return {
            redirect: {
                destination: `blog/${query.post}`
            }
        }
    }

    // normal operation
    return { props: {} }
}

With this piece of code, the route will function normally if there is no query parameter named post. However, if there is, it will redirect the page to /blog/:post_id.

Answer 2

Check out my solution below.

//src/routes/index.js
export async function getServerSideProps(context) {

    const { query } = context;
    console.log(query);

    if (query.post) {
        return {
            redirect: {
                destination: `blog/${query.post}`
            }
        }
    }

    // normal operation
    return { props: {} }
}

With this piece of code, the route will function normally if there is no query parameter named post. However, if there is, it will redirect the page to /blog/:post_id.

Is it possible to create a system in NextJS that utilizes either the path or the query parameter?

Answer №1

Similar questions

Why isn't res.send() in Node.js sending the message?

What steps should I take to see my JavaScript code in a web browser?

AngularJS text area not displaying HTML content

Streaming videos on Xbox One is not supported while in developer mode

Steps to display content post authentication using JWT

Create a new build for testing and debugging using create-react-app

Dynamically binding image URLs in VUEJS

Tips for implementing a personalized 410 error page in a Next.js 13 application router

How can I iterate through a directory containing files and extract the exported JavaScript object from each one?

React throws an error message when the update depth surpasses its maximum limit

A more efficient method for creating a nested array of distinct values using JavaScript

Ways to troubleshoot errors that arise while building Next.js with Mui framework

What is the method for inputting multi-line strings in the REST Client extension for Visual Studio Code?

Is it possible to pass a component into a dialogue box in material-ui using React?

The ajax response is returning the entire page's html code instead of just the text content from the editor

Organize database entries by categories for easy navigation

Choose a variety of table rows based on the values of the data attributes that are

Error: The reference 'GetServerSideProps' is being incorrectly used as a type instead of a value. Perhaps you intended to use 'typeof GetServerSideProps' instead?

The NextJS routing feature displays the [slug] parameter in the URL

Creating an AJAX request in Play 2.x by using a shared button