このようなクエリパラメータを含むクリーンなURLがあります。
私はこのようにクライアント側でクエリパラメータ 'id'をキャプチャしようとしています。
static async getInitialProps({req, query: { id }}) {
return {
postId: id
}
}
render() {
const props = {
data: {
'id': this.props.postId // this query param is undefined
}
}
return (
<Custom {...props}>A component</Custom>
)
}
私の高速エンドポイントは次のようになります。
app.post(
'/post/:id',
(req, res, next) => {
let data = req.body;
console.log(data);
res.send('Ok');
}
);
しかし、サーバー側のコンソール出力は次のようになります。
{ id: 'undefined' }
私はドキュメントとgithubの問題を読みましたが、なぜこれが起こっているのか理解できません。
フロントエンドコードが正しいため、クエリ文字列から投稿IDを取得する方法です。
ただし、バックエンドコードが正しくないため、最初にGETルートを使用してNext.jsページをレンダリングする必要があります。また、通常のクエリパラメータとそれらのパスの両方から組み合わせとして最終クエリパラメータを作成するために、パスパラメータを抽出する必要があります。 params、これはexpressを使用して次のようになります。
const app = next({ dev: process.env.NODE_ENV === 'development' });
app.prepare().then(() => {
const server = express();
server.get('/post/:id', (req, res) => {
const queryParams = Object.assign({}, req.params, req.query);
// assuming /pages/posts is where your frontend code lives
app.render(req, res, '/posts', queryParams);
});
});
このNext.jsの例を確認してください: https://github.com/zeit/next.js/tree/canary/examples/parameterized-routing 詳しくは情報。