Bug report

Describe the bug

The latest with-react-intl example #16215 has a few issues:

• The extracted message ids don't match the ones produced in the .next cache. The compiled langs are therefore not used and default to the ones defined in the components.

{
  "65a8e": "Hello, World!",
}

__jsx("p", null, __jsx(react_intl__WEBPACK_IMPORTED_MODULE_1__["FormattedMessage"], {
    id: "N015Sp",
    defaultMessage: [{
      "type": 0,
      "value": "Hello, World!"
    }]
  }))

• The translation happens only client side.

• When navigating to a different page the locale is undefined and defaults back to en.

To Reproduce

1. Install the latest with-react-intl example
2. yarn build && yarn start
3. Switch your browser language to French
4. The messages are still the default ones (in English)
5. Fix the ids in .next cache to match those in compiled-lang
6. The messages are first rendered in English, then change to French client side
7. Naviguate to another page, the messages are back to English

Expected behavior

• Expect to have matching compiled ids
• Expect to return compiled messages in SSR
• Expect to keep the same locale when navigating

Screenshots

System information

• Version of Next.js: 9.5.2
• Version of Node.js: 14.7.0