Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Also create head when creating root layout #42571

Merged
merged 7 commits into from Nov 8, 2022
Merged

Also create head when creating root layout #42571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f42a91d
Create head file when creating root layout, also cover more cases
Nov 7, 2022
a2fba47
fix tests
Nov 7, 2022
601792e
Fix
Nov 7, 2022
702d500
Fix test
Nov 7, 2022
2b738c4
Add empty <head /> when creating root layout
Nov 8, 2022
451cc15
Merge branch 'canary' into create-root-layout-head
Nov 8, 2022
d1966a9
Merge branch 'canary' into create-root-layout-head
kodiakhq[bot] Nov 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
78 changes: 65 additions & 13 deletions packages/next/lib/verifyRootLayout.ts
View file
Open in desktop
Expand Up @@ -26,7 +26,7 @@ function getRootLayout(isTs: boolean) {
}) {
return (
<html>
<head></head>
<head />
<body>{children}</body>
hanneslund marked this conversation as resolved.
Show resolved Hide resolved
</html>
)
Expand All @@ -37,14 +37,27 @@ function getRootLayout(isTs: boolean) {
return `export default function RootLayout({ children }) {
return (
<html>
<head></head>
<head />
<body>{children}</body>
</html>
)
}
`
}

function getHead() {
return `export default function Head() {
return (
<>
<title></title>
<meta content="width=device-width, initial-scale=1" name="viewport" />
<link rel="icon" href="/favicon.ico" />
</>
)
}
`
}

export async function verifyRootLayout({
dir,
appDir,
Expand All @@ -63,15 +76,38 @@ export async function verifyRootLayout({
appDir,
`**/layout.{${pageExtensions.join(',')}}`
)
const hasLayout = layoutFiles.length !== 0

const normalizedPagePath = pagePath.replace(`${APP_DIR_ALIAS}/`, '')
const firstSegmentValue = normalizedPagePath.split('/')[0]
const pageRouteGroup = firstSegmentValue.startsWith('(')
? firstSegmentValue
: undefined
const pagePathSegments = normalizedPagePath.split('/')

// Find an available dir to place the layout file in, the layout file can't affect any other layout.
// Place the layout as close to app/ as possible.
let availableDir: string | undefined

if (layoutFiles.length === 0) {
// If there's no other layout file we can place the layout file in the app dir.
// However, if the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
// prefer creating the root layout in that route group.
const firstSegmentValue = pagePathSegments[0]
availableDir = firstSegmentValue.startsWith('(') ? firstSegmentValue : ''
} else {
pagePathSegments.pop() // remove the page from segments

let currentSegments: string[] = []
for (const segment of pagePathSegments) {
currentSegments.push(segment)
// Find the dir closest to app/ where a layout can be created without affecting other layouts.
if (
!layoutFiles.some((file) =>
file.startsWith(currentSegments.join('/'))
)
) {
availableDir = currentSegments.join('/')
break
}
}
}

if (pageRouteGroup || !hasLayout) {
if (typeof availableDir === 'string') {
const resolvedTsConfigPath = path.join(dir, tsconfigPath)
const hasTsConfig = await fs.access(resolvedTsConfigPath).then(
() => true,
Expand All @@ -80,19 +116,35 @@ export async function verifyRootLayout({

const rootLayoutPath = path.join(
appDir,
// If the page is within a route group directly under app (e.g. app/(routegroup)/page.js)
// prefer creating the root layout in that route group. Otherwise create the root layout in the app root.
pageRouteGroup ? pageRouteGroup : '',
availableDir,
`layout.${hasTsConfig ? 'tsx' : 'js'}`
)
await fs.writeFile(rootLayoutPath, getRootLayout(hasTsConfig))
const headPath = path.join(
appDir,
availableDir,
`head.${hasTsConfig ? 'tsx' : 'js'}`
)
const hasHead = await fs.access(headPath).then(
() => true,
() => false
)

if (!hasHead) {
await fs.writeFile(headPath, getHead())
}

console.log(
chalk.green(
`\nYour page ${chalk.bold(
`app/${normalizedPagePath}`
)} did not have a root layout, we created ${chalk.bold(
`app${rootLayoutPath.replace(appDir, '')}`
)} for you.`
)}${
!hasHead
? ` and ${chalk.bold(`app${headPath.replace(appDir, '')}`)}`
: ''
} for you.`
) + '\n'
)

Expand Down