マークアップファイルをNext.jsの文字列としてインポート

Question

Next.jsの文字列としてマークダウンファイルをインポートするにはどうすればよいですか？

docs/home.md

# Home 

This is my **awesome** home! 

pages/index.js

import React from 'react'; 
import markdown from '../docs/home.md'; 

export default() => { 
    return (
    <div> 
     <pre>{markdown}</pre> 
     <small><i>Import and render markdown using Next.js</i></small> 
    </div> 
); 
}; 

：

Answer 1

あなたはマークダウンファイルをロードし、例えば、文字列としてそれらを返すようにNext.jsのWebPACKのローダーを設定することができますpackage.json

{ 
    "name": "example", 
    "version": "1.0.0", 
    "scripts": { 
    "dev": "next", 
    "build": "next build", 
    "start": "next start" 
    }, 
    "dependencies": { 
    "file-loader": "^1.1.6", 
    "next": "^4.2.1", 
    "raw-loader": "^0.5.1", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0" 
    } 
} 

next.config.js

module.exports = { 
    webpack: (config) => { 
    return Object.assign({}, config, { 
     externals: Object.assign({}, config.externals, { 
     fs: 'fs', 
     }), 
     module: Object.assign({}, config.module, { 
     rules: config.module.rules.concat([ 
      { 
      test: /\.md$/, 
      loader: 'emit-file-loader', 
      options: { 
       name: 'dist/[path][name].[ext]', 
      }, 
      }, 
      { 
      test: /\.md$/, 
      loader: 'raw-loader', 
      } 
     ]), 
     }), 
    }); 
    } 
}; 

実行されている。このような

$ npm run dev 

何かが表示されます：

マークダウン文字列では、好きなことをすることができます。たとえば、marksyで処理します。