feat(nextjs): update to Next.js 13.3.0

[jaysoo]

This PR updates the installed version of Next.js to 13.3.0 and migrates existing workspaces.

We will hold off on migrating existing workspaces to 13.3 until we can put together a better migration experience for those using Storybook (they need to go to v7).

Also includes a few fixes. See below.

Use Storybook v7 for React/Next.js

Storybook v7 is stable now, and v6 is no longer maintained. Next.js 13.2 requires v7 to work, so it will be the default moving forward unless the user passes --storybook7Configuration=false when generating Storybook config (i.e. nx g @nrwl/react:storybook-configuration --storybook7Configuration=false).

Note: Another PR just landed to update Storybook to v7 for new projects. No changes needed here anymore.

Disable type checks by default (app/layout types are incorrect)

This only applies when appDir is enabled in next.config.js.

The Next.js type generation has a bug where the paths are wrong inside a monorepo. The PR is merged but waiting for a release (vercel/next.js#47534).

Once released we can re-enable the type-check by default. In the meantime the user can update next.config.js config to enable it if the patch is released before we update.

Generate libraries with separate RSC entry

Add a server-only entry for libraries generated with @nrwl/next:lib to help with libraries that export both client and server components. So users can import client-only components using deep import path. See: #15830

e.g.

Say our library my-lib exported both RSC and client components in index.ts.

// my-lib/src/index.ts
export { MyClientOnlyComponent } from './my-client-only-component';
export { MyServerOnlyComponent } from './my-server-only-component';

Then importing this in a client component will error out.

Fails:

'use client';
import { MyClientOnlyComponent } from '@acme/my-lib';

export function ParentComponent() {
  return <MyClientOnlyComponent />;
}

But if we separate the two components into separate entry files.

// my-lib/src/index.ts
export { MyClientOnlyComponent } from './my-client-only-component';

// my-lib/src/server.ts
export { MyServerOnlyComponent } from './my-server-only-component';

Then importing from client entry file will work in both server and client components.

Works:

'use client';
import { MyClientOnlyComponent } from '@acme/my-lib';

export function ParentComponent() {
  // Works because the main entry no longer has server-only components
  return <MyClientOnlyComponent />;
}

Also works:

import { MyClientOnlyComponent } from '@acme/my-lib';
import { MyServerOnlyComponent } from '@acme/my-lib/server';

export async function SomePage() {
  // Can render client component from server component
  return (
    <MyClientOnlyComponent/>
    <MyServerOnlyComponent/>
  );
}

This isn't an Nx issue because it's coming from @next/swc:

• How imports are collected: https://github.com/vercel/next.js/blob/2820f0787512b6514e36c02cbddd4d3ab69f0251/packages/next-swc/crates/core/src/react_server_components.rs#L64
• The check that fails due to forbidden imports: https://github.com/vercel/next.js/blob/2820f0787512b6514e36c02cbddd4d3ab69f0251/packages/next-swc/crates/core/src/react_server_components.rs#L384

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 4c34f67. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 8 targets

• nx affected -t e2e-macos --parallel=1 --exclude=e2e-detox
• nx affected --target=e2e --base=8bc89bbb0852e2d06f48c38e99a04ab3d0464be8 --head=4c34f67d1598bf615568a7a67a0325de3f57e7c2 --parallel=1
• nx affected --target=test --base=8bc89bbb0852e2d06f48c38e99a04ab3d0464be8 --head=4c34f67d1598bf615568a7a67a0325de3f57e7c2 --parallel=1
• nx run-many -t check-imports check-commit check-lock-files depcheck --parallel=1 --no-dte
• nx affected --target=build --base=8bc89bbb0852e2d06f48c38e99a04ab3d0464be8 --head=4c34f67d1598bf615568a7a67a0325de3f57e7c2 --parallel=3
• nx affected --target=lint --base=8bc89bbb0852e2d06f48c38e99a04ab3d0464be8 --head=4c34f67d1598bf615568a7a67a0325de3f57e7c2 --parallel=3
• nx-cloud record -- nx format:check --base=8bc89bbb0852e2d06f48c38e99a04ab3d0464be8 --head=4c34f67d1598bf615568a7a67a0325de3f57e7c2
• nx documentation --no-dte

---

Sent with 💌 from NxCloud.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nx-dev	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 12, 2023 2:46pm

[ndcunningham]

LGTM

[jaysoo]

This is just creating an empty file for additional import paths (e.g. src/server.ts for RSC). Other generators using this generator should fill them in with more useful content.

[FrozenPandaz]

I don't know if I'm a huge fan of having this here..

Not a big deal probably... but this currently doesn't check if those paths already exist and would just overwrite them 🤷.

I feel like we should rework this function's API to be more like addTsConfigImportPaths(tree, importPath: string, importModules: string[])

function jsLibraryGenerator(tree) {
  addTsConfigPath(tree, importPath, [joinPathFragments(projectRoot, 'src/index.ts')])
  addTsConfigPath(tree, joinPathFragments(importPath, 'server'), [joinPathFragments(projectRoot, 'src/server.ts')])
}

This would open us up to adding import paths which are not under src.

We could add the new function and keep the current usages the same.. then transition them over. What do you think?

[jaysoo]

Yeah we can do something like that.

[jaysoo]

Removed the original function updateRootTsConfig and added addTsConfigPath so each library generator can add the import paths that are needed. The original function wasn't named clearly to understand the intention, the new function is more specific.

For now, the new server.ts entry is only for Next.js apps, and we can look at adding something similar to @nrwl/react:lib later when it's more clear the direction of RSCs.

[FrozenPandaz]

Sweet!

[github-actions]

This pull request has already been merged/closed. If you experience issues related to these changes, please open a new issue referencing this pull request.