Node.js 能否在Next.js中使用模板？_Node.js_Express_Next.js

Node.js 能否在Next.js中使用模板？

node.js express next.js

Node.js 能否在Next.js中使用模板？,node.js,express,next.js,Node.js,Express,Next.js,我对web开发相当陌生，目前有一个使用Node.js、Express和Pug的基本web服务器，我希望将其转换为Next.js。是否可以在Next.js中创建可重复使用的模板（类似于Pug/Jade？我就是这样做的。有更好的方法，但这是我喜欢的方式。我来自特快车把，以前用过哈巴狗，所以我就是这样做的在pages/_app.js文件中： import React from 'react' import Head from 'next/head' export default function

我对web开发相当陌生，目前有一个使用Node.js、Express和Pug的基本web服务器，我希望将其转换为Next.js。是否可以在Next.js中创建可重复使用的模板（类似于Pug/Jade？

我就是这样做的。有更好的方法，但这是我喜欢的方式。我来自特快车把，以前用过哈巴狗，所以我就是这样做的

在pages/_app.js文件中：

import React from 'react'
import Head from 'next/head'

export default function MyApp({ Component, pageProps }) {
  const Layout = Component.Layout || LayoutEmpty // if page has no layout, it uses blank layout
  const PageTitle = Component.PageTitle // page title of the page

  return (
    <Layout>
      {PageTitle? (<Head><title>{PageTitle}</title></Head>) : '' }
      <Component {...pageProps} />
    </Layout>
  )
}

const LayoutEmpty = ({children}) => <>{children}</> // blank layout if doesnt detect any layout

import Link from 'next/link';
import {useRouter} from 'next/router'

export function LayoutOne({children}) {
try {
  return (<>
    <nav>
      <ul>
        <li><Link href="/"><a>Home</a></Link></li>
      </ul>
    </nav>
    <div>{children}</div>
  </>)
} catch(e) {console.log(e)}
}

import React, { useState, useEffect } from 'react';
import {LayoutOne} from '../component/layout' // location of your layout.js file

Aboutpage.PageTitle = 'About | Website Tag Line' // set title of your page
Aboutpage.Layout = LayoutOne // using LayoutOne. If you dont do this, its considered blank layout and you'll get no layout
export default function Aboutpage() {
try {
  return (
    <>
      <div>
        <h2>About</h2>
      </div>
    </>
  );
} catch(e) {console.log(e)}
}

export function LayoutTwo({children}) {
try {
  return (<>
    <nav>
      <ul>
        <li><Link href="/dashboard"><a>Dashboard</a></Link></li>
      </ul>
    </nav>
    <div>{children}</div>
  </>)
} catch(e) {console.log(e)}
}

import {LayoutTwo} from '../component/layout'
Aboutpage.Layout = LayoutTwo