keii.dev
The Node.js® Website
feat: introduced not found / error layout (#6247)
authored by
Caner Akdas
and committed by
GitHub
bd543e00
4664438b
+189
-85
+30
-2
app/[locale]/error.tsx
+30
-2
app/[locale]/error.tsx
···
1
1
'use client';
2
2
3
3
import { captureException } from '@sentry/nextjs';
4
+
import { useTranslations } from 'next-intl';
4
5
import type { FC } from 'react';
5
6
import { useMemo } from 'react';
6
7
7
-
const ErrorPage: FC<{ error: Error }> = ({ error }) => {
8
+
import Button from '@/components/Common/Button';
9
+
import CenteredLayout from '@/layouts/New/Centered';
10
+
import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
11
+
12
+
/** @deprecated remove legacy component when website redesign is done */
13
+
const LegacyErrorPage: FC<{ error: Error }> = ({ error }) => {
8
14
useMemo(() => captureException(error), [error]);
9
15
10
16
return (
···
15
21
);
16
22
};
17
23
18
-
export default ErrorPage;
24
+
const ErrorPage: FC<{ error: Error }> = ({ error }) => {
25
+
captureException(error);
26
+
const t = useTranslations();
27
+
28
+
return (
29
+
<CenteredLayout>
30
+
<div className="glowingBackdrop" />
31
+
32
+
<main>
33
+
500
34
+
<h1 className="special -mt-4">
35
+
{t('layouts.error.internalServerError.title')}
36
+
</h1>
37
+
<p className="-mt-4 max-w-sm text-center text-lg">
38
+
{t('layouts.error.internalServerError.description')}
39
+
</p>
40
+
<Button href="/">{t('layouts.error.backToHome')}</Button>
41
+
</main>
42
+
</CenteredLayout>
43
+
);
44
+
};
45
+
46
+
export default ENABLE_WEBSITE_REDESIGN ? ErrorPage : LegacyErrorPage;
+26
-2
app/[locale]/not-found.tsx
+26
-2
app/[locale]/not-found.tsx
···
3
3
import { useTranslations } from 'next-intl';
4
4
import type { FC } from 'react';
5
5
6
-
const LocalizedNotFound: FC = () => {
6
+
import Button from '@/components/Common/Button';
7
+
import CenteredLayout from '@/layouts/New/Centered';
8
+
import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
9
+
10
+
/** @deprecated remove legacy component when website redesign is done */
11
+
const LegacyNotFoundPage: FC = () => {
7
12
const t = useTranslations();
8
13
9
14
return (
···
14
19
);
15
20
};
16
21
17
-
export default LocalizedNotFound;
22
+
const NotFoundPage: FC = () => {
23
+
const t = useTranslations();
24
+
25
+
return (
26
+
<CenteredLayout>
27
+
<div className="glowingBackdrop" />
28
+
29
+
<main>
30
+
404
31
+
<h1 className="special -mt-4">{t('layouts.error.notFound.title')}</h1>
32
+
<p className="-mt-4 max-w-sm text-center text-lg">
33
+
{t('layouts.error.notFound.description')}
34
+
</p>
35
+
<Button href="/">{t('layouts.error.backToHome')}</Button>
36
+
</main>
37
+
</CenteredLayout>
38
+
);
39
+
};
40
+
41
+
export default ENABLE_WEBSITE_REDESIGN ? NotFoundPage : LegacyNotFoundPage;
+35
-2
app/global-error.tsx
+35
-2
app/global-error.tsx
···
5
5
import type { FC } from 'react';
6
6
import { useMemo } from 'react';
7
7
8
-
const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
8
+
import Button from '@/components/Common/Button';
9
+
import BaseLayout from '@/layouts/BaseLayout';
10
+
import CenteredLayout from '@/layouts/New/Centered';
11
+
import { ENABLE_WEBSITE_REDESIGN } from '@/next.constants.mjs';
12
+
13
+
/** @deprecated remove legacy component when website redesign is done */
14
+
const LegacyGlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
9
15
useMemo(() => captureException(error), [error]);
10
16
11
17
return (
···
17
23
);
18
24
};
19
25
20
-
export default GlobalErrorPage;
26
+
const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
27
+
captureException(error);
28
+
29
+
return (
30
+
<html>
31
+
<body>
32
+
<BaseLayout>
33
+
<CenteredLayout>
34
+
<div className="glowingBackdrop" />
35
+
36
+
<main>
37
+
500
38
+
<h1 className="special -mt-4">Internal Server Error</h1>
39
+
<p className="-mt-4 max-w-sm text-center text-lg">
40
+
This page has thrown a non-recoverable error.
41
+
</p>
42
+
<Button href="/">Back to Home</Button>
43
+
</main>
44
+
</CenteredLayout>
45
+
</BaseLayout>
46
+
</body>
47
+
</html>
48
+
);
49
+
};
50
+
51
+
export default ENABLE_WEBSITE_REDESIGN
52
+
? GlobalErrorPage
53
+
: LegacyGlobalErrorPage;
+11
i18n/locales/en.json
+11
i18n/locales/en.json
···
199
199
"weekly-updates": "Weekly Updates",
200
200
"wg": "Working Groups"
201
201
}
202
+
},
203
+
"error": {
204
+
"notFound": {
205
+
"title": "Page could not be found",
206
+
"description": "Sorry, we couldn’t find the page you’re after! Try starting again from the homepage."
207
+
},
208
+
"internalServerError": {
209
+
"title": "Internal Server Error",
210
+
"description": "This page has thrown a non-recoverable error."
211
+
},
212
+
"backToHome": "Back to Home"
202
213
}
203
214
},
204
215
"pages": {
+18
layouts/New/Centered.tsx
+18
layouts/New/Centered.tsx
···
1
+
import type { FC, PropsWithChildren } from 'react';
2
+
3
+
import WithFooter from '@/components/withFooter';
4
+
import WithNavBar from '@/components/withNavBar';
5
+
6
+
import styles from './layouts.module.css';
7
+
8
+
const CenteredLayout: FC<PropsWithChildren> = ({ children }) => (
9
+
<>
10
+
<WithNavBar />
11
+
12
+
<div className={styles.centeredLayout}>{children}</div>
13
+
14
+
<WithFooter />
15
+
</>
16
+
);
17
+
18
+
export default CenteredLayout;
+5
-12
layouts/New/Home.tsx
+5
-12
layouts/New/Home.tsx
···
1
1
import type { FC, PropsWithChildren } from 'react';
2
2
3
-
import WithFooter from '@/components/withFooter';
4
-
import WithNavBar from '@/components/withNavBar';
3
+
import CenteredLayout from '@/layouts/New/Centered';
5
4
6
5
import styles from './layouts.module.css';
7
6
8
7
const HomeLayout: FC<PropsWithChildren> = ({ children }) => (
9
-
<>
10
-
<WithNavBar />
8
+
<CenteredLayout>
9
+
<div className="glowingBackdrop" />
11
10
12
-
<div className={styles.homeLayout}>
13
-
<div className="glowingBackdrop" />
14
-
15
-
<main>{children}</main>
16
-
</div>
17
-
18
-
<WithFooter />
19
-
</>
11
+
<main className={styles.homeLayout}>{children}</main>
12
+
</CenteredLayout>
20
13
);
21
14
22
15
export default HomeLayout;
+59
-56
layouts/New/layouts.module.css
+59
-56
layouts/New/layouts.module.css
···
58
58
}
59
59
}
60
60
61
-
.homeLayout {
61
+
.centeredLayout {
62
62
@apply flex
63
63
w-full
64
64
items-center
···
70
70
71
71
main {
72
72
@apply items-center
73
-
justify-center
74
-
gap-8
75
-
md:flex-row
76
-
md:gap-14
77
-
xl:gap-28
78
-
2xl:gap-32;
73
+
justify-center;
74
+
}
75
+
}
76
+
77
+
.homeLayout {
78
+
@apply gap-8
79
+
md:flex-row
80
+
md:gap-14
81
+
xl:gap-28
82
+
2xl:gap-32;
83
+
84
+
section {
85
+
&:nth-of-type(1) {
86
+
@apply flex
87
+
max-w-[500px]
88
+
flex-[1_0]
89
+
flex-col
90
+
gap-8;
79
91
80
-
section {
81
-
&:nth-of-type(1) {
92
+
> div {
82
93
@apply flex
83
-
max-w-[500px]
84
-
flex-[1_0]
94
+
max-w-[400px]
85
95
flex-col
86
-
gap-8;
96
+
gap-4;
87
97
88
-
> div {
89
-
@apply flex
90
-
max-w-[400px]
91
-
flex-col
92
-
gap-4;
98
+
p {
99
+
@apply text-base
100
+
md:text-lg;
101
+
}
93
102
94
-
p {
95
-
@apply text-base
96
-
md:text-lg;
97
-
}
98
-
99
-
small {
100
-
@apply text-center
101
-
text-sm
102
-
text-neutral-800
103
-
xs:text-xs
104
-
dark:text-neutral-400;
105
-
}
103
+
small {
104
+
@apply text-center
105
+
text-sm
106
+
text-neutral-800
107
+
xs:text-xs
108
+
dark:text-neutral-400;
106
109
}
107
110
}
111
+
}
108
112
109
-
&:nth-of-type(2) {
110
-
@apply flex
111
-
max-w-md
112
-
flex-[1_1]
113
-
flex-col
114
-
items-center
115
-
gap-4
116
-
md:max-w-2xl
117
-
lg:max-w-3xl;
113
+
&:nth-of-type(2) {
114
+
@apply flex
115
+
max-w-md
116
+
flex-[1_1]
117
+
flex-col
118
+
items-center
119
+
gap-4
120
+
md:max-w-2xl
121
+
lg:max-w-3xl;
118
122
119
-
> div {
120
-
@apply w-fit;
123
+
> div {
124
+
@apply w-fit;
121
125
122
-
div[data-state='active'] a {
123
-
@apply border-none
124
-
bg-neutral-900
125
-
px-3
126
-
py-1.5
127
-
text-sm
128
-
font-medium;
126
+
div[data-state='active'] a {
127
+
@apply border-none
128
+
bg-neutral-900
129
+
px-3
130
+
py-1.5
131
+
text-sm
132
+
font-medium;
129
133
130
-
&:hover {
131
-
@apply bg-neutral-800;
132
-
}
134
+
&:hover {
135
+
@apply bg-neutral-800;
133
136
}
134
137
}
138
+
}
135
139
136
-
> p {
137
-
@apply text-center
138
-
text-sm
139
-
text-neutral-800
140
-
dark:text-neutral-200;
141
-
}
140
+
> p {
141
+
@apply text-center
142
+
text-sm
143
+
text-neutral-800
144
+
dark:text-neutral-200;
142
145
}
143
146
}
144
147
}
-2
next.dynamic.constants.mjs
-2
next.dynamic.constants.mjs
···
15
15
* @type {((route: import('./types').RouteSegment) => boolean)[]} A list of Ignored Routes by Regular Expressions
16
16
*/
17
17
export const IGNORED_ROUTES = [
18
-
// This is used to ignore the 404 route for the static generation (/404)
19
-
({ pathname }) => pathname === '404',
20
18
// This is used to ignore all blog routes except for the English language
21
19
({ locale, pathname }) =>
22
20
locale !== defaultLocale.code && /^blog\//.test(pathname),
-9
pages/en/404.md
-9
pages/en/404.md
+4
styles/new/markdown.css
+4
styles/new/markdown.css