Skip to content

Commit a8182ff

Browse files
briangershonbriangershon
committed
Fix links for Next.js 13.x
1 parent 256953b commit a8182ff

File tree

4 files changed

+129
-114
lines changed

4 files changed

+129
-114
lines changed

‎components/ContentBanner.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Flex, Heading, Wrap, WrapItem } from '@chakra-ui/react'
2-
import Link from 'next/link'
2+
import NextLink from 'next/link'
33
import Image from 'next/image'
44

55
interface LessonProps {
@@ -27,7 +27,7 @@ export const ContentBanner: React.FC<LessonProps> = (props: LessonProps) => {
2727

2828
return (
2929
<>
30-
<Link key={slug} href={`/lessons/${path}/${slug}`} passHref>
30+
<NextLink key={slug} href={`/lessons/${path}/${slug}`} passHref>
3131
<Flex direction="column" bg="gray.800" p={5} rounded={5}>
3232
<Flex
3333
direction="row"
@@ -77,7 +77,7 @@ export const ContentBanner: React.FC<LessonProps> = (props: LessonProps) => {
7777
{description}
7878
</Flex>
7979
</Flex>
80-
</Link>
80+
</NextLink>
8181
</>
8282
)
8383
}

‎components/NavBar.tsx

Lines changed: 73 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ function NavBar() {
2222
return (
2323
<Box>
2424
<Flex justify="left" alignItems="center">
25-
<Link variant="logo" href={'/'}>
25+
<Link as={NextLink} variant="logo" href={'/'}>
2626
{router.pathname.endsWith('/[slug]') ? (
2727
<SchoolOfCodeLogo />
2828
) : (
@@ -53,43 +53,46 @@ function NavBar() {
5353
/>
5454
<MenuList backgroundColor={'soc.vividViolet'}>
5555
<MenuItem>
56-
<NextLink href="/" passHref>
57-
<Link
58-
variant={
59-
router.pathname === '/'
60-
? 'top-navigation-active'
61-
: 'top-navigation'
62-
}
63-
>
64-
Home
65-
</Link>
66-
</NextLink>
56+
<Link
57+
as={NextLink}
58+
href="/"
59+
passHref
60+
variant={
61+
router.pathname === '/'
62+
? 'top-navigation-active'
63+
: 'top-navigation'
64+
}
65+
>
66+
Home
67+
</Link>
6768
</MenuItem>
6869
<MenuItem>
69-
<NextLink href="/getting-started" passHref>
70-
<Link
71-
variant={
72-
router.pathname.startsWith('/getting-started')
73-
? 'top-navigation-active'
74-
: 'top-navigation'
75-
}
76-
>
77-
GET STARTED
78-
</Link>
79-
</NextLink>
70+
<Link
71+
as={NextLink}
72+
href="/getting-started"
73+
passHref
74+
variant={
75+
router.pathname.startsWith('/getting-started')
76+
? 'top-navigation-active'
77+
: 'top-navigation'
78+
}
79+
>
80+
GET STARTED
81+
</Link>
8082
</MenuItem>
8183
<MenuItem>
82-
<NextLink href="/lessons" passHref>
83-
<Link
84-
variant={
85-
router.pathname.startsWith('/lessons')
86-
? 'top-navigation-active'
87-
: 'top-navigation'
88-
}
89-
>
90-
Tracks
91-
</Link>
92-
</NextLink>
84+
<Link
85+
as={NextLink}
86+
href="/lessons"
87+
passHref
88+
variant={
89+
router.pathname.startsWith('/lessons')
90+
? 'top-navigation-active'
91+
: 'top-navigation'
92+
}
93+
>
94+
Tracks
95+
</Link>
9396
</MenuItem>
9497
</MenuList>
9598
</Menu>
@@ -103,41 +106,44 @@ function NavBar() {
103106
alignItems="center"
104107
display={{ base: 'none', md: 'none', lg: 'block' }}
105108
>
106-
<NextLink href="/" passHref>
107-
<Link
108-
variant={
109-
router.pathname === '/'
110-
? 'top-navigation-active'
111-
: 'top-navigation'
112-
}
113-
>
114-
Home
115-
</Link>
116-
</NextLink>
109+
<Link
110+
as={NextLink}
111+
href="/"
112+
passHref
113+
variant={
114+
router.pathname === '/'
115+
? 'top-navigation-active'
116+
: 'top-navigation'
117+
}
118+
>
119+
Home
120+
</Link>
117121

118-
<NextLink href="/getting-started" passHref>
119-
<Link
120-
variant={
121-
router.pathname.startsWith('/getting-started')
122-
? 'top-navigation-active'
123-
: 'top-navigation'
124-
}
125-
>
126-
Get Started
127-
</Link>
128-
</NextLink>
122+
<Link
123+
as={NextLink}
124+
href="/getting-started"
125+
passHref
126+
variant={
127+
router.pathname.startsWith('/getting-started')
128+
? 'top-navigation-active'
129+
: 'top-navigation'
130+
}
131+
>
132+
Get Started
133+
</Link>
129134

130-
<NextLink href="/lessons" passHref>
131-
<Link
132-
variant={
133-
router.pathname.startsWith('/lessons')
134-
? 'top-navigation-active'
135-
: 'top-navigation'
136-
}
137-
>
138-
Tracks
139-
</Link>
140-
</NextLink>
135+
<Link
136+
as={NextLink}
137+
href="/lessons"
138+
passHref
139+
variant={
140+
router.pathname.startsWith('/lessons')
141+
? 'top-navigation-active'
142+
: 'top-navigation'
143+
}
144+
>
145+
Tracks
146+
</Link>
141147

142148
{/* <Button colorScheme="gray" variant="solid">
143149
<ConnectButton chainStatus="icon" showBalance={false} />

‎components/footer/Footer.tsx

Lines changed: 32 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -26,19 +26,25 @@ export default function Footer() {
2626
align={{ base: 'center', md: 'center' }}
2727
>
2828
<Stack direction={'row'} spacing={3}>
29-
<NextLink
29+
<Link
30+
as={NextLink}
3031
href={
3132
'https://github.com/Developer-DAO/academy/issues/new?assignees=&labels=needs+triage%2C+bug&template=bug_report.md&title='
3233
}
3334
passHref
35+
isExternal
36+
textDecoration="underline"
3437
>
35-
<Link isExternal textDecoration="underline">
36-
Feedback
37-
</Link>
38-
</NextLink>
39-
<NextLink href={'/docs'} passHref>
40-
<Link textDecoration="underline">Contribute</Link>
41-
</NextLink>
38+
Feedback
39+
</Link>
40+
<Link
41+
href={'/docs'}
42+
passHref
43+
as={NextLink}
44+
textDecoration="underline"
45+
>
46+
Contribute
47+
</Link>
4248
</Stack>
4349
<Stack direction={'row'} spacing={6}>
4450
<SocialButton
@@ -60,37 +66,40 @@ export default function Footer() {
6066
<Text>Developer DAO Foundation © {new Date().getFullYear()}</Text>
6167
<Text align="center">
6268
Website content licensed under{' '}
63-
<NextLink
69+
<Link
70+
as={NextLink}
6471
href={'http://creativecommons.org/licenses/by-nc/4.0/'}
6572
passHref
73+
isExternal
74+
textDecoration="underline"
6675
>
67-
<Link isExternal textDecoration="underline">
68-
CC BY-NC 4.0
69-
</Link>
70-
</NextLink>
76+
CC BY-NC 4.0
77+
</Link>
7178
.
7279
</Text>
7380
<Text>
7481
Website code is licensed under{' '}
75-
<NextLink
82+
<Link
83+
as={NextLink}
7684
href={'https://github.com/Developer-DAO/academy/blob/main/LICENSE'}
7785
passHref
86+
isExternal
87+
textDecoration="underline"
7888
>
79-
<Link isExternal textDecoration="underline">
80-
MIT
81-
</Link>
82-
</NextLink>
89+
MIT
90+
</Link>
8391
.
8492
</Text>
8593
<Text>
86-
<NextLink
94+
<Link
95+
as={NextLink}
8796
href={'https://www.developerdao.com/privacy-policy'}
8897
passHref
98+
isExternal
99+
textDecoration="underline"
89100
>
90-
<Link isExternal textDecoration="underline">
91-
Privacy Policy
92-
</Link>
93-
</NextLink>
101+
Privacy Policy
102+
</Link>
94103
</Text>
95104
</Container>
96105
</Box>

‎pages/getting-started/index.tsx

Lines changed: 21 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -105,25 +105,24 @@ const GettingStarted: React.FC<LessonProps> = ({ lessons }) => {
105105
maxW="40vw"
106106
margin="0 auto"
107107
>
108-
<NextLink
108+
<Link
109+
as={NextLink}
109110
href={`/lessons/${lesson.path}/${lesson.slug}`}
110111
passHref
111112
>
112-
<Link>
113-
<Button
114-
height="auto"
115-
style={{
116-
whiteSpace: 'normal',
117-
wordWrap: 'break-word',
118-
padding: '0.5rem',
119-
width: '100%',
120-
fontSize: 'xl',
121-
}}
122-
>
123-
{lesson.frontMatter.title}
124-
</Button>
125-
</Link>
126-
</NextLink>
113+
<Button
114+
height="auto"
115+
style={{
116+
whiteSpace: 'normal',
117+
wordWrap: 'break-word',
118+
padding: '0.5rem',
119+
width: '100%',
120+
fontSize: 'xl',
121+
}}
122+
>
123+
{lesson.frontMatter.title}
124+
</Button>
125+
</Link>
127126
</ListItem>
128127
))}
129128
</>
@@ -150,16 +149,17 @@ const GettingStarted: React.FC<LessonProps> = ({ lessons }) => {
150149
feedback
151150
</Text>{' '}
152151
about this project and our current lessons.{' '}
153-
<NextLink
152+
<Link
153+
as={NextLink}
154154
href={
155155
'https://github.com/Developer-DAO/academy/issues/new?assignees=&labels=needs+triage%2C+bug&template=bug_report.md&title='
156156
}
157157
passHref
158+
isExternal
159+
textDecoration="underline"
158160
>
159-
<Link isExternal textDecoration="underline">
160-
Submit your suggestion or bug report.
161-
</Link>
162-
</NextLink>
161+
Submit your suggestion or bug report.
162+
</Link>
163163
</ListItem>
164164
<ListItem>
165165
We&apos;re also looking for{' '}

0 commit comments

Comments
 (0)