How to create a page without any layout?

[5ervant]

How to create a page without any layout?

E.g., not being wrapped by _app.js and the following will just output Test as what it is:

// ./pages/test.js
export default function Test() {
  return <em>Test</em>;
}

[alanqchen]

I'm not sure if it is possible (maybe there's some workaround for it). What I suggest is moving whatever layout you have in _app.js and moving it to a separate component file and import it into the pages where needed. _app.js is meant to contain the components that are on every page.

[IamLizu]

[5ervant]

Nope, in my case, I already have a template on my pages/_app.js.
I just remove my template from pages/_app.js and just wrapped all the pages who needs template.

[IamLizu]

@5ervant, so? please explain your comment, you comment is unclear.

And you if your question is whether you can create a page without a layout template/component, yes, you can.

[IamLizu]

oh, my bad. I understood your question wrong earlier.

No, if you have something in your _app.js, it will be used by all of your pages.

[mattcarlotta]

It's not possible to break outside of the custom _app.js file since it, by design, is supposed to wrap all client-side pages. That said, you can break outside of the div.__next element by using createPortal. However, there are two drawbacks:

1.) Limited to CSR
2.) Technically still wrapped by the _app, but you'll lay over it using CSS (position: absolute; top: 0;). As such, you'll also have to provide some CSS hacks to not display the _app's layout when the page is SSR'd.

See demo repo here for creating portals.

---

A significantly better approach (also included in the demo repo above) would be to wrap individual pages with a reusable Layout component. If any of the pages required different layout/styles, then using something similar to the component below, you can conditionally pass in a css prop to override it's styles:

function Layout({ children, css }) {
  return (
    <div className="layout">
      {children}
      <style jsx>{`
        .layout {
          background: #1f1f1f;
          margin-top: 100px;
          padding: 10px;
          color: pink;
          ${css};
        }
      `}</style>
    </div>
  );
}

export default Layout;

[IamLizu]

Great