react 服务端渲染(ssr) 框架 Next.js

官方网站：​​Layout from '../components/MyLayout.js'import Link from 'next/link'import fetch from 'isomorphic-unfetch'const Index = (props) => (

Batman TV Shows

{props.shows.map(({show}) => (
• {show.name}
))}

)Index.getInitialProps = async function() { const res = await fetch(' const data = await res.json() console.log(`Show data fetched. Count: ${data.length}`) return { shows: data }}export default Index

about.js:

import Layout from '../components/MyLayout.js'export default () => (

This is the about page

)

post.js:

import Layout from '../components/MyLayout.js'import fetch from 'isomorphic-unfetch'const Post = (props) => (

{props.show.name}

{props.show.summary.replace(/<[/]?p>/g, '')}

)Post.getInitialProps = async function (context) { const { id } = context.query const res = await fetch(` const show = await res.json() console.log(`Fetched show: ${show.name}`) return { show }}export default Post

Header.js:

import Link from 'next/link'const linkStyle = { marginRight: 15}const Header = () => (

)export default Header

MyLayout.js:

import Header from './Header'const layoutStyle = { margin: 20, padding: 20, border: '1px solid #DDD'}const Layout = (props) => (

)export default Layout

server.js:

const express = require('express')const next = require('next')const dev = process.env.NODE_ENV !== 'production'const app = next({ dev })const handle = app.getRequestHandler()app.prepare().then(() => { const server = express() server.get('/p/:id', (req, res) => { const actualPage = '/post' const queryParams = { id: req.params.id } app.render(req, res, actualPage, queryParams) }) server.get('*', (req, res) => { return handle(req, res) }) server.listen(3000, (err) => { if (err) throw err console.log('> Ready on })}).catch((ex) => { console.error(ex.stack) process.exit(1)})

package.json:

{ "name": "hello-next", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "dev": "node server.js", "build": "next build", "start": "NODE_ENV=production node server.js" }, "keywords": [], "author": "", "license": "ISC", "dependencies": { "express": "^4.16.4", "isomorphic-unfetch": "^3.0.0", "next": "^7.0.2", "react": "^16.6.3", "react-dom": "^16.6.3" }}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。