From 8fd5f0b5915d082ec2b2014e61c04914ab995045 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Mon, 24 Oct 2022 15:46:59 -0700 Subject: [PATCH] Add default not found template (#41750) It should correctly render the global not found fallback page even if the not-found file is missing. ## Bug - [ ] Related issues linked using `fixes #number` - [x] Integration tests added - [ ] Errors have a helpful link attached, see `contributing.md` ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see `contributing.md` ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) --- packages/next/client/components/error.tsx | 76 +++++++++++++++++++ packages/next/server/app-render.tsx | 27 ++++--- test/e2e/app-dir/app-static.test.ts | 10 +++ .../app/blog/[author]/[slug]/page.js | 6 ++ 4 files changed, 109 insertions(+), 10 deletions(-) create mode 100644 packages/next/client/components/error.tsx diff --git a/packages/next/client/components/error.tsx b/packages/next/client/components/error.tsx new file mode 100644 index 0000000000000..78eb9fb939b36 --- /dev/null +++ b/packages/next/client/components/error.tsx @@ -0,0 +1,76 @@ +import React from 'react' + +const styles: { [k: string]: React.CSSProperties } = { + error: { + fontFamily: + '-apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Fira Sans", Avenir, "Helvetica Neue", "Lucida Grande", sans-serif', + height: '100vh', + textAlign: 'center', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + }, + + desc: { + display: 'inline-block', + textAlign: 'left', + lineHeight: '49px', + height: '49px', + verticalAlign: 'middle', + }, + + h1: { + display: 'inline-block', + margin: 0, + marginRight: '20px', + padding: '0 23px 0 0', + fontSize: '24px', + fontWeight: 500, + verticalAlign: 'top', + lineHeight: '49px', + }, + + h2: { + fontSize: '14px', + fontWeight: 'normal', + lineHeight: '49px', + margin: 0, + padding: 0, + }, +} + +export function NotFound() { + return ( +
+ + 404: This page could not be found. + +
+