Ensure flight manifest is correct with app and pages dir (#38716)

This fixes the failing test case on canary in the `app-dir` test suite which is caused by the flight-manifest including references to the `pages/index` chunk and it being attempted to be loaded for a page in `app` which causes a webpack error in development. 

This also fixes an error from missing `getDerivedStateFromError` in our error boundary in development. 

## Bug

- [x] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

x-ref: https://github.com/vercel/next.js/runs/7360713710?check_suite_focus=true
x-ref: https://github.com/vercel/next.js/runs/7361755629?check_suite_focus=true
x-ref: https://github.com/vercel/next.js/runs/7361755806?check_suite_focus=true

packages/next/build/webpack/plugins/flight-manifest-plugin.ts

@@ -79,6 +79,12 @@ export class FlightManifestPlugin {
         id: string | number,
         mod: any
       ) {
+        // if appDir is enabled we shouldn't process chunks from
+        // the pages dir
+        if (chunk.name?.startsWith('pages/') && appDir) {
+          return
+        }
+
         const isCSSModule =
           mod.type === 'css/mini-extract' ||
           (mod.loaders &&

packages/react-dev-overlay/src/internal/ErrorBoundary.tsx

@@ -12,6 +12,11 @@ class ErrorBoundary extends React.PureComponent<
   ErrorBoundaryState
 > {
   state = { error: null }
+
+  static getDerivedStateFromError(error: Error) {
+    return { error }
+  }
+
   componentDidCatch(
     error: Error,
     // Loosely typed because it depends on the React version and was