Said BADAOUI

NextJs has better support for absolute imports and aliases. It is now possible to set a baseUrl in jsconfig.json. This file also has support for paths now.

// tsconfig.json or jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/ui/*": ["components/*"]
}
}
}
// Imports 'components/ui/input'
import Input from '@/ui/input'

Thank you :)

nextjs tips series — static HTML export

next exportexports your app to static HTML, which can be run standalone without the need of a Node.js server (for those who want to buy a template on HTML format on any marketplace like Envato ThemeForest, etc..).

The exported app supports almost every feature of Next.js, incl. dynamic routes, prefetching, preloading and dynamic imports.

// Package.json
"scripts": {
"build": "next build && next export"
}

Thank you :)

The 500 errors are handled both client-side and server-side by the Error component.

If you wish to override it, define the file pages/_error.js and add the following code.

// pages/_error.js
function Error({ statusCode }) {
return (
<p>
{statusCode
? `An error ${statusCode} occurred on server`
: 'An error occurred on client'}
</p>
)
}

Error.getInitialProps = ({ res, err }) => {
const statusCode = res ? res.statusCode : err ? err.statusCode : 404
return { statusCode }
}

export default Error;

Thank you :)