创建Layout组件的三种方法
-
const Layout = props => ( <div style={layoutStyle}> <Header /> {props.children} </div> ); const Index = () => ( <Layout> <p>Hello Next.js</p> </Layout> );
-
const withLayout = Page => { return () => ( <div style={layoutStyle}> <Header /> <Page /> </div> ); }; const Page = () => <p>Hello Next.js</p>; export default withLayout(Page);
-
const Layout = props => ( <div style={layoutStyle}> <Header /> {props.content} </div> ); const indexPageContent = <p>Hello Next.js</p>; export default function Index() { return <Layout content={indexPageContent} />; }
next框架封装了router和redux，可以直接使用
import { useRouter } from 'next/router';
import Link from 'next/link';
<Link href="/p/[id]" as={`/p/${props.id}`}>
<a>{props.id}</a>
</Link>Link组件href属性渲染文件的路径，as属性表示地址栏显示的URL。
动态路由
pages/p/[id].js，[]内是参数，在[id].js文件中通过router.query.id读取
getInitialProps中请求数据，成功后可在props中使用
// 在React组件中使用
import React from 'react'
export default class extends React.Component {
static async getInitialProps({ req }) {
const userAgent = req ? req.headers['user-agent'] : navigator.userAgent
return { userAgent }
}
render() {
return (
<div>
Hello World {this.props.userAgent}
</div>
)
}
}
// 在stateless组件中使用
Index.getInitialProps = async function(context) {
const { id } = context.query;
const res = await fetch('https://api.tvmaze.com/search/shows?q=batman');
const data = await res.json();
console.log(`Show data fetched. Count: ${data.length}`);
return {
shows: data.map(entry => entry.show)
};
};注：请求过程在服务端完成，所以浏览器不会有控制台输出和网络请求。当使用Link组件时，跳转在客户端完成，控制台输出和网络请求发生在浏览器中。
Next.js推荐Css in Js
注意作用域，父组件样式不影响子组件
<style jsx global>
<style jsx>{`
h1,
a {
font-family: 'Arial';
}
ul {
padding: 0;
}
li {
list-style: none;
margin: 5px 0;
}
a {
text-decoration: none;
color: blue;
}
a:hover {
opacity: 0.6;
}
`}</style>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent