Custom _app.js is being ignored when using React Server Components

[chenraz]

Verify canary release

• I verified that the issue exists in Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #123-Ubuntu SMP Fri Apr 8 09:10:54 UTC 2022
Binaries:
  Node: 16.14.0
  npm: 8.3.1
  Yarn: 1.22.5
  pnpm: 7.0.0
Relevant packages:
  next: 12.1.7-canary.0
  react: 18.1.0
  react-dom: 18.1.0

What browser are you using? (if relevant)

Chrome, Firefox

How are you deploying your application? (if relevant)

next start

Describe the Bug

Custom app on _app.tsx is ignored, when using React Server Components (with fresh create-next-app installation)

Expected Behavior

Elements returned from custom app function on _app.tsx should be rendered on screen.

To Reproduce

Github repo to reproduce:
https://github.com/chenraz/nextjs-rsc.git

1. Create next app:
   pnpm create next-app@latest -- --ts

2. Enable experimental RSC on next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  experimental: {
    runtime: 'nodejs',
    serverComponents: true,
  },
}

module.exports = nextConfig

3. Add layout to _app.tsx:

import '../styles/globals.css'
import type { AppProps } from 'next/app'

function MyApp({ Component, pageProps }: AppProps) {
  return <div>
    <span>ADD SOMETHING BEFORE</span>
    <Component {...pageProps} />
  </div>
}

export default MyApp

So far so good - custom app layout is rendered on screen.

4. Modify pages/index.tsx to pages/index.server.tsx

Custom app layout does not render on screen.

[toxicFork]

I had a similar issue and creating an _app.server.tsx makes it work, to some extent. There are many other issues after that, though.

[chenraz]

Thanks for the fix, it solves the problem

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.