Problem
Whenever I change to an undefined route in my project it leads to 404 predefined pages of nextjs. I wanted to build my customisable page for this type of situation.
Solution 1: Customizing 400 Page OR 500 Page
Next Js provides facilities of customisable error pages , where we can customize pages like 404 error, 500 error etc.. Refer here : https://nextjs.org/docs/advanced-features/custom-error-page
To do this, first of all define or create file names with particular error code.js in folder pages, then create a functional component which returns the required jsx.
Note: This page will not support getServerSideProps.
Solution 2: More Advance Page Customizing
What are 301 redirects?
- 301 redirects should be used when a page is no longer relevant, useful or has been removed. They are also really valuable for site rebuilds, where URLs are tidied up into the newer, cleaner pages. It is very important to redirect any old URLs that won’t be staying the same on a rebuild of your website.
- If you don’t use a 301 redirect whenever you remove a page from your site, search engines will be served a 404 Not Found error response code, which can result in the page being dropped from the search engine’s index completely over time.
- If you don’t use a 301 redirect whenever you remove a page from your site, search engines will be served a 404 Not Found error response code, which can result in the page being dropped from the search engine’s index completely over time.
When do you have to use 301 redirects?
Use cases:
- Moving to a new domain (our previous website was Hallam.biz which is now redirected to Hallaminternet.com)
- Cleaning up dynamic URLs and redirect them to shorter, search engine friendly versions
- Preventing duplicate content problems; for example, if you have multiple blogs written on the same subject and want to aggregate them into one super blog post
- If you wish to handle this type of scenario then simply edit the next.config.js file and add another object in it as example:
