Skip to content

Instantly share code, notes, and snippets.

@naotone

naotone/maintenance.tsx

Last active October 3, 2023 03:32
Show Gist options
  • Save naotone/014038835854374917a73701ef195e3b to your computer and use it in GitHub Desktop.
Save naotone/014038835854374917a73701ef195e3b to your computer and use it in GitHub Desktop.
Download ZIP
Maintenance mode redirection for next.js
Raw
maintenance.tsx
import { GetServerSideProps } from 'next'
import React from 'react'
import Head from 'next/head'
import Header from '../components/header'
import Footer from '../components/footer'
const Layout: React.FunctionComponent = () => (
<>
<Head>
<title></title>
</Head>
<div>
<>
<Header />
<main>
<p>Maintenance</p>
</main>
<Footer />
</>
</div>
</>
)
export default Layout
export const getServerSideProps: GetServerSideProps = async (context) => {
const { res } = context
res.statusCode = 503
return { props: {} }
}
Raw
next.config.js
redirects() {
return [
process.env.MAINTENANCE_MODE
? {
source: '/((?!maintenance|_next).*)',
destination: '/maintenance',
permanent: false,
}
: null,
process.env.MAINTENANCE_MODE
? {
source: '/(maintenance/.*)',
destination: '/maintenance',
permanent: false,
}
: null,
].filter(Boolean)
},
@afif14
Copy link

afif14 commented Oct 3, 2023

heyHello, may I ask how to apply this page maintenance to the project? Should it be placed in the root folder?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment