Use Webpack Aliases in your Next.js project
npm install --save @blunck/next-alias
Create a next.config.js
in your project
// next.config.js
const withAlias = require('@blunck/next-alias')({
'@components': __dirname + '/components'
})
module.exports = withAlias()
You can now use aliases in your imports
import foo from '@components/Blog'
export default () => <Blog />
Optionally you can add your custom Next.js configuration as parameter
// next.config.js
const withAlias = require('@blunck/next-alias')()
module.exports = withAlias({
webpack(config, options) {
return config
}
})