I want to use the Link component for accessibility.
#Is there any way to use the Link component with router.back() ?
timber bolt
rustic portalBOT
Hi @timber bolt. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
The Link component in Next.js is a powerful tool for creating accessible navigation in your web application. It extends the HTML <a> tag to provide prefetching and client-side navigation between routes.
Here's a basic example of how to use the Link component:
import Link from 'next/link'
export default function Page() {
return <Link href="/dashboard">Dashboard</Link>
}
(Source: Next.js Documentation (https://nextjs.org/docs/app/api-reference/components/link))
When using the Link component, there are a few things to keep in mind for accessibility:
- Functional Components as Children: If the child of
Linkis a functional component, you must wrap the component inReact.forwardRef. This is necessary for proper handling ofonClick,href, andrefprops. Here's an example:
import Link from 'next/link'
const MyButton = React.forwardRef(({ onClick, href }, ref) => {
return (
<a href={href} onClick={onClick} ref={ref}>
Click Me
</a>
)
})
function Home() {
return (
<Link href="/about" passHref legacyBehavior>
<MyButton />
</Link>
)
}
export default Home
(Source: Next.js Documentation (https://nextjs.org/docs/pages/api-reference/components/link))
- Custom Components as Children: If the child of
Linkis a custom component that wraps an<a>tag, you must addpassHreftoLink. This ensures the<a>tag will have thehrefattribute, which is important for accessibility and SEO. Here's an example:
import Link from 'next/link'
import styled from 'styled-components'
const RedLink = styled.a`
color: red;
`
function NavLink({ href, name }) {
return (
<Link href={href} passHref legacyBehavior>
<RedLink>{name}</RedLink>
</Link>
)
}
export default NavLink
(Source: Next.js Documentation (https://nextjs.org/docs/pages/api-reference/components/link))
-
Route Announcements: Next.js includes a route announcer by default to announce page transitions to assistive technology. This works by inspecting
document.title, then the<h1>element, and finally the URL pathname. For the most accessible user experience, ensure that each page in your application has a unique and descriptive title.
(Source: Next.js Documentation (https://nextjs.org/docs/architecture/accessibility)) -
Linting: Next.js provides an integrated ESLint experience out of the box, including custom rules for Next.js. By default, Next.js includes
eslint-plugin-jsx-a11yto help catch accessibility issues early.
(Source: Next.js Documentation (https://nextjs.org/docs/architecture/accessibility))
Remember, accessibility is a crucial aspect of web development. By using the Link component and following these guidelines, you can make your Next.js application more accessible to all users.
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
timber bolt
@rustic portal this is great, but it doesn't answer my question: How can I use the Link component to go back to the previous page (same behaviour as useRouter .back() )?
rustic portalBOT
Let me check the knowledge base for you. One moment! :books:
To navigate back to the previous page using the Link component, you can use the onClick prop to execute the router.back() function from the useRouter hook. Here's an example:
import Link from 'next/link'
import { useRouter } from 'next/router'
function BackButton() {
const router = useRouter()
return (
<Link href="#">
<a onClick={(e) => { e.preventDefault(); router.back() }}>Go back</a>
</Link>
)
}
export default BackButton
In this example, we prevent the default action of the <a> tag using e.preventDefault(), and then use router.back() to navigate to the previous page.
Please note that this will only work if there is a previous entry in the history stack. If there isn't, router.back() will do nothing.
(Source: Next.js Documentation (https://nextjs.org/docs/app/api-reference/functions/use-router))
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
timber bolt
@rustic portal this doesn't seem like a good accessibility approach. Is there no other way?
rustic portalBOT
Let me check the knowledge base for you. One moment! :books:
You're correct that using router.back() in this way can potentially lead to accessibility issues. The href="#" can be confusing for screen readers, and if there's no previous page in the history stack, the link will do nothing, which can be confusing for users.
A more accessible approach would be to provide a fallback URL in case there's no previous page in the history stack. You can use the router.push() method to navigate to this fallback URL. Here's an example:
import { useRouter } from 'next/router'
function BackButton() {
const router = useRouter()
const goBack = (e) => {
e.preventDefault()
if (window.history.length > 2) {
router.back()
} else {
router.push('/')
}
}
return (
<a href="#" onClick={goBack}>Go back</a>
)
}
export default BackButton
In this example, we check if there's a previous page in the history stack by checking window.history.length > 2 (the length is 2 when the current page is the first page in the history stack). If there is a previous page, we use router.back() to navigate to it. If there isn't, we use router.push('/') to navigate to the homepage.
Please note that this is a workaround and may not be the best solution for all use cases. It's always a good idea to consider the specific needs of your users and the context of your application when designing navigation.
(Source: Next.js Documentation (https://nextjs.org/docs/app/api-reference/functions/use-router))
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
timber bolt
@rustic portal In my Next js project I want to have a Next Link component to navigate the user back to the previous page, so same behaviour as doing something in the lines of const router = useRouter(); <Button onClick={() => router.back()}>Back</Button>. I want to use the Link component for accessibility reasons.
rustic portalBOT
Let me check the knowledge base for you. One moment! :books:
The Link component in Next.js is primarily designed for navigating to specific routes in your application, not for navigating back to the previous page. However, you can use the onClick prop of the Link component to execute the router.back() function from the useRouter hook.
Here's an example:
import { useRouter } from 'next/router'
import Link from 'next/link'
function BackButton() {
const router = useRouter()
return (
<Link href="#">
<a onClick={(e) => { e.preventDefault(); router.back() }}>Go back</a>
</Link>
)
}
export default BackButton
In this example, we prevent the default action of the <a> tag using e.preventDefault(), and then use router.back() to navigate to the previous page.
Please note that this will only work if there is a previous entry in the history stack. If there isn't, router.back() will do nothing.
(Source: Next.js Documentation (https://nextjs.org/docs/app/api-reference/functions/use-router))
However, as you correctly pointed out, this approach might not be the best for accessibility. A more accessible approach would be to provide a fallback URL in case there's no previous page in the history stack. You can use the router.push() method to navigate to this fallback URL. Here's an example:
import { useRouter } from 'next/router'
function BackButton() {
const router = useRouter()
const goBack = (e) => {
e.preventDefault()
if (window.history.length > 2) {
router.back()
} else {
router.push('/')
}
}
return (
<a href="#" onClick={goBack}>Go back</a>
)
}
export default BackButton
In this example, we check if there's a previous page in the history stack by checking window.history.length > 2 (the length is 2 when the current page is the first page in the history stack). If there is a previous page, we use router.back() to navigate to it. If there isn't, we use router.push('/') to navigate to the homepage.
Please note that this is a workaround and may not be the best solution for all use cases. It's always a good idea to consider the specific needs of your users and the context of your application when designing navigation.