Base Path from the next.js documentations writes:

For example, using /about will automatically become /docs/about when basePath is set to /docs.

export default function HomePage() {
 return (
   <>
     <Link href="/about">
       <a>About Page</a>
     </Link>
   </>
 )
}

Can I generate a path base on a path I provided, without using Link element?

The following is my next.config,js.

module.exports = {
  reactStrictMode: true,
  basePath: '/Some_Folder',
  trailingSlash: true,
}

I have a simple page in a Next.js project, under pages folder.

import Link from 'next/link';

import firebase from '../common/firebase_init';
import 'firebase/auth';

import { useState, useEffect } from 'react';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

export default function App(props) {
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  useEffect(() => {
    const unsub = firebase.auth().onAuthStateChanged(user => {
      if (!user) setShowLoginDialog(true);
    });

    return () => {
      unsub();
    }
  });

  const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '../', 
    // This is a path that Firebase jumps to after signing in is successful
    // '../' is the relative path, but I may move this page to a new location, 
    // or even share the code across different pages.
    //
    // So, I want to write "/" here and have Next.js Generate a correct path for me.
    // something like getLink("/")
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
  };

  return <div id="login-container">
    {showLoginDialog ? <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /> : null}
    <Link href="/">
      <a>Go Back</a>
    </Link>
  </div>;
}

I would like to generate a path for signInSuccessUrl: '../', in the above code.

Reason being, that '../' is the relative path, but I may move this page to a new location, or even share the code across different pages (like making a class).

It would be great if I can have something like getLink("/").

Base Path from the next.js documentations writes:

For example, using /about will automatically become /docs/about when basePath is set to /docs.

export default function HomePage() {
 return (
   <>
     <Link href="/about">
       <a>About Page</a>
     </Link>
   </>
 )
}

Can I generate a path base on a path I provided, without using Link element?

The following is my next.config,js.

module.exports = {
  reactStrictMode: true,
  basePath: '/Some_Folder',
  trailingSlash: true,
}

I have a simple page in a Next.js project, under pages folder.

import Link from 'next/link';

import firebase from '../common/firebase_init';
import 'firebase/auth';

import { useState, useEffect } from 'react';

import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';

export default function App(props) {
  const [showLoginDialog, setShowLoginDialog] = useState(false);
  useEffect(() => {
    const unsub = firebase.auth().onAuthStateChanged(user => {
      if (!user) setShowLoginDialog(true);
    });

    return () => {
      unsub();
    }
  });

  const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '../', 
    // This is a path that Firebase jumps to after signing in is successful
    // '../' is the relative path, but I may move this page to a new location, 
    // or even share the code across different pages.
    //
    // So, I want to write "/" here and have Next.js Generate a correct path for me.
    // something like getLink("/")
    signInOptions: [
      firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ],
  };

  return <div id="login-container">
    {showLoginDialog ? <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={firebase.auth()} /> : null}
    <Link href="/">
      <a>Go Back</a>
    </Link>
  </div>;
}

I would like to generate a path for signInSuccessUrl: '../', in the above code.

Reason being, that '../' is the relative path, but I may move this page to a new location, or even share the code across different pages (like making a class).

It would be great if I can have something like getLink("/").

• javascript
• node.js
• reactjs
• next.js

2 Answers 2

You can leverage the useRouter hook from next/router to access the current basePath of your app.

import { useRouter } from 'next/router';

export default function App(props) {
    const router = useRouter();
    const getLink = (path) => `${router.basePath}${path}`;

    console.log(getLink('/about')); // Will log `/your-base-path/about

    // Remaining code...
}

Next.js also has an addBasePath function:

import { addBasePath } from 'next/dist/client/add-base-path';

addBasePath('/about');