Import txt files as string into your next.js App
import file from './xxx.txt'
Webpack 5 has 'Asset Modules' to allow you to import assets without configuring loaders now.
Next.js use Webpack 5 internally, so we can use 'source assets' to import txt files as strings.
Two steps to let you be able to import a txt file as a string.
custom Webpack config for next.js
config.module.rules.push({
test: /\.txt$/i,
type: 'asset/source'
})
declare txt as a module for typescript
Wildcard module declarations can be used to cover these cases.
declare module '*.txt' {
const content: string;
export default content;
}
example
import t1 from './1.txt'
console.log(t1)
output
event - compiled successfully
离开罪之路的人蒙祝福，
他不去随从恶人的计谋，
他不会站在罪人的道路上，
也不去坐好讥笑人的座位，
他喜爱的是耶和华律法，
昼夜默诵的也是他律法。
The full commit to enabling import txt files in your next.js app
references
https://webpack.js.org/guides/asset-modules/#source-assets
https://webpack.js.org/concepts/#loaders
https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations
https://nextjs.org/docs/api-reference/next.config.js/custom-webpack-config
❤️ Support This Blog
If this post helped you, you can support my writing with a small donation. Thank you for reading.
Comments
Post a Comment