Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

router.asPath shows homepage as "/index" and excludes query string

See original GitHub issue

Verify canary release

I verified that the issue exists in Next.js canary release

Provide environment information

Standard Vercel env (nextjs auto-detected)

What browser are you using? (if relevant)

Chrome, Safari, all the same result

How are you deploying your application? (if relevant)

Vercel on push

Describe the Bug

Part 1. When using router.asPath on Vercel, it’ll return “/index” for the homepage “/” route. Part 2. Also, when using query strings in the url i.e. “/zzz=1”, it’ll also return just “/index”

To observe this behaviour, look at source via “View Page Source” in browser and not “Inspect Element”

Expected Behavior

Part 1. When using router.asPath on Vercel, expect it to return “/” instead of “/index” Part 2. Also, when using query strings in the url i.e. “/zzz=1”, it’ll also return just “/index” - I’d expect it to show “/zzz=1” - it basically skips the query string which is against what the official router documentation states that query will be included.

Again, please observe this behaviour via “View Page Source” and not “Inspect Element”

It is especially important for Open Graph URLs etc.

To Reproduce

import Head from "next/head";
import {useRouter} from 'next/router'

const HTTP_HOST = process.env.NEXT_PUBLIC_HTTP_HOST;

export default Layout;

function Layout({
                    children
                }) {
    const router = useRouter()
    const currentUrl = HTTP_HOST + router.asPath;

    console.log('router.asPath: ' + router.asPath) // this will show as expected
    console.log('router.pathname: ' + router.pathname)

    return (
        <>
            <Head>
                <meta property="og:url" content={currentUrl}/> {/* use View Page Source to see it being incorrect */}
                <meta property="og:asPath" content={router.asPath}/>
            </Head>
            <main>
                <div>
                    {children}
                </div>
            </main>

        </>
    );
}

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

ThePeterMickcommented, Oct 18, 2022

I’ve experienced it first hand @quanglam2807 - with or without ISR IIRC - please see the test code repo I’ve created - @balazsorban44 any updates on this one? 🙌

1reaction

balazsorban44commented, Mar 16, 2022

Same for source, hence I did not bother updating the screenshot, I admit I should have to avoid confusion:

The getStaticProps usage is new information though, thanks. I’ll investigate

Top Results From Across the Web

How to Use File-Based Routing in Next.js - Upmostly

We can still navigate to upmostly/routing through our index route, ... the route will then be passed to the page as query string...

How can I get (query string) parameters from the URL in Next.js?

Using Next.js 9 or above you can get query parameters: ... import { useRouter } from 'next/router' const Index = () => {...

Routing and Action Selection in ASP.NET Web API

NET Web API routes an HTTP request to a particular action on a controller. Note. For a high-level overview of routing, see Routing...

Getting start with Next.js Framework for server-rendered React ...

pathname - String of the current path excluding the query string ... asPath - String of the actual path (including the query) shows...

parse_url - Manual - PHP

parse_url(string $url , int $component = -1): int|string|array|null|false. This function parses a URL and returns an associative array containing any of the ...