Managing embedded URLs in Next.js applications

Question

Managing embedded URLs in Next.js applications

I am currently in the process of developing an ecommerce platform, expecting users to utilize both our domain and their own custom domains. For example:

ourplatform.com/username

theirdomain.com

My goal is to customize the inline links based on the specific domain used to access the site. If it is our domain, the link structure should be /username/page, whereas for their domain, it should simply be /page.

Here is the code snippet I have created thus far, which only adds the username if the domain belongs to our platform:

import Link from 'next/link'

const customPath = ({ username }) => {
  if (typeof window !== 'undefined') {
    return window.location !== 'ourplatform.com'
      ? '/'
      : `/${username}`
  }
}

export default ({ username }) => {
  const link = customPath({ username })
  return (
    <Link href={link}>
      Home
    </Link>
  )
}

However, I am encountering the following error message:

Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `undefined` instead.

How can I successfully define different href links based on the user's domain?

javascript url path hyperlink next.js

Answer 1

Answer №1

Ensuring proper evaluation of window.location is crucial during the client-side phase. However, to prevent the link constant from being set to undefined in the server-side compilation phase, it's essential for customPath() to return a value for the <Link /> component.

const customPath = ({ username }) => {
  if (typeof window !== 'undefined') {
    return window.location.hostname !== 'ourplatform.com' // include `.hostname`
      ? '/'
      : `/${username}`
  }
  return '/' // To ensure server-side compilation
}

Answer 2

Ensuring proper evaluation of window.location is crucial during the client-side phase. However, to prevent the link constant from being set to undefined in the server-side compilation phase, it's essential for customPath() to return a value for the <Link /> component.

const customPath = ({ username }) => {
  if (typeof window !== 'undefined') {
    return window.location.hostname !== 'ourplatform.com' // include `.hostname`
      ? '/'
      : `/${username}`
  }
  return '/' // To ensure server-side compilation
}

Answer 3

Answer №2

Instead of directly checking typeof window !== 'undefined' to access window.location, I suggest handling the customPath logic within a useEffect function to avoid any server-side rendering discrepancies.

Below is a custom hook that manages the custom path logic without triggering errors or warnings.

import Link from 'next/link'

function useCustomPath({ username }) {
    const [customPath, setCustomPath] = useState('/') // Default path during SSR

    useEffect(() => {
        const path = window.location.hostname !== 'ourplatform.com' ? '/' : `/${username}`
        setCustomPath(path) // Set appropriate path on the client-side
    }, [username])

    return customPath
}

export default ({ username }) => {
    const link = useCustomPath({ username })
    
    return (
        <Link href={link}>
            Home
        </Link>
    )
}

Answer 4

Instead of directly checking typeof window !== 'undefined' to access window.location, I suggest handling the customPath logic within a useEffect function to avoid any server-side rendering discrepancies.

Below is a custom hook that manages the custom path logic without triggering errors or warnings.

import Link from 'next/link'

function useCustomPath({ username }) {
    const [customPath, setCustomPath] = useState('/') // Default path during SSR

    useEffect(() => {
        const path = window.location.hostname !== 'ourplatform.com' ? '/' : `/${username}`
        setCustomPath(path) // Set appropriate path on the client-side
    }, [username])

    return customPath
}

export default ({ username }) => {
    const link = useCustomPath({ username })
    
    return (
        <Link href={link}>
            Home
        </Link>
    )
}

Managing embedded URLs in Next.js applications

Answer №1

Answer №2

Similar questions

On IOS, the internal links within my PWA app are unexpectedly opening as external links

Tips for stopping links in iOS web applications from launching in a new Safari tab

Using JavaScript and jQuery to toggle visibility of a dynamically created input field

Ways to decrease font size and insert a line break within a constrained input space?

What could be the reason for the absence of a TypeScript error in this situation?

Filtering nested object properties by value using Java Script

Preventing Shift: How to Only Replace the Chosen Vue Draggable Item Without Affecting Other Grid Items

ReactJs throws an error of "Uncaught SyntaxError: Unexpected token '<' while utilizing the map() function in ReactJs that produces JSX (specifically MaterialUi-icons) within an array

Sending a variable to a template in AngularJS

Modifying Div Size with Jquery

Ensuring security against cross site scripting attacks on window.location.href

Loading New Page When Iframe is Loaded

Exploring the power of Next JS by implementing server-side rendering with a

There was an error: "TypeError: Unable to access the equipmentImage property of

Uncovering the jsPlumb link between a pair of identifiers

jQuery's show/hide functionality allows for the dynamic resizing of images,

Retrieving JSON data from two different URLs and processing it in the same Android activity

Step-by-step guide on retrieving data from E-goi with REST API in Google Apps Script

Creating a webpage that seamlessly scrolls and dynamically loads elements

Leverage information stored in an array within the HandsonTable Angular directive