Enhanced layout helpers for Next.js
Last updated 3 months ago by artsy-engineering .
MIT · Original npm · Tarball · package.json
$ cnpm install @artsy/next-layout 
SYNC missed versions from official npm registry.


This package provides a new mechanism for creating shared layouts in Next.js. Inspired by this article, this package enables you to create a new _layout file anywhere in your pages directory to automatically provide a layout for all pages in that directory and its children.


yarn add @artsy/next-layout

If you don't have one yet, create a .babelrc at the root of your Next.js project and add the following

module.exports = {
  presets: ["next/babel"],
  plugins: ["@artsy/next-layout/babel"],

If you don't already have a _app.tsx or _app.jsx in your pages directory go ahead and create one. You'll need the following content:

import React from "react";
import { Layout } from "@artsy/next-layout";

export function App(props) {
  return <Layout {...props} />;

If you've already got an _app file and have made modifications to it, that's fine! Instead of returning Component from the props, make sure you pass props to Layout and return that instead.


Creating a layout

Inside the pages directory of your next.js app create a _layout.tsx or _layout.jsx in whatever directory you'd like to provide a layout for. If you put it in the root (pages) then all pages of your Next.js site would by default have that layout. If you place it in the pages/blog directory, then all pages in the blog directory will have that layout.

A _layout file must have a named export of Layout.

export const Layout = ({ children }) => {
  return (
      <h1>Welcome to my site!</h1>

The children prop passed to Layout is the Next.js page being rendered. Layout will also be passed any props that the Next.js page would receive.

Overriding a layout

If you have a particular page you'd like to override the layout on then doing so is pretty easy! In your page file, simply define a Layout property attached to your exported component.

const MyPage = () => {
  return <p>Lorem Ipsum</p>

MyPage.Layout = ({ children }) => {
  return (
      <h1>This is a layout override</h1>

export MyPage;

If you'd just like to disable the layout, you can do so by setting the Layout property to null.

const MyPage = () => {
  return <p>Lorem Ipsum</p>

// This will disable the page's layout
MyPage.Layout = null;

export MyPage;

Current Tags

  • 0.1.1-canary.3.24.0                                ...           canary (3 months ago)
  • 0.2.0                                ...           latest (3 months ago)

7 Versions

  • 0.2.0                                ...           3 months ago
  • 0.1.1-canary.3.24.0                                ...           3 months ago
  • 0.1.0                                ...           3 months ago
  • 0.0.2-canary.2.16.0                                ...           3 months ago
  • 0.0.2-canary.2.14.0                                ...           3 months ago
  • 0.0.2-canary.1.11.0                                ...           3 months ago
  • 0.0.2-canary.1.10.0                                ...           3 months ago
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependencies (1)
Dev Dependencies (3)
Dependents (0)

Copyright 2014 - 2016 © taobao.org |