这个是根据nextjs服务端渲染做的一个小demo



关键性代码，主要是控制模态框显示隐藏

关于index页面

//index.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Dialog from '@material-ui/core/Dialog';

import DialogTitle from '@material-ui/core/DialogTitle';

import DialogContent from '@material-ui/core/DialogContent';

import DialogContentText from '@material-ui/core/DialogContentText';

import DialogActions from '@material-ui/core/DialogActions';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

class Index extends React.Component {

  state = {

    open: false,

  };

  handleClose = () => {

    this.setState({

      open: false,

    });

  };

  handleClick = () => {

    this.setState({

      open: true,

    });

  };

  render() {

    const { classes } = this.props;

    const { open } = this.state;

    return (

      <div className={classes.root}>

        <Dialog open={open} onClose={this.handleClose}>

          <DialogTitle>Super Secret Password</DialogTitle>

          <DialogContent>

            <DialogContentText>1-2-3-4-5</DialogContentText>

          </DialogContent>

          <DialogActions>

            <Button color="primary" onClick={this.handleClose}>

              OK

            </Button>

          </DialogActions>

        </Dialog>

        <Typography variant="h4" gutterBottom>

          Material-UI

        </Typography>

        <Typography variant="subtitle1" gutterBottom>

          example project

        </Typography>

        <Typography gutterBottom>

          <Link href="/about">

            <a>Go to the about page</a>

          </Link>

        </Typography>

        <Button variant="contained" color="secondary" onClick={this.handleClick}>

          Super Secret Password

        </Button>

      </div>

    );

  }

}

Index.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(Index);

关于about页面



代码如下：

//about.js

/* eslint-disable jsx-a11y/anchor-is-valid */

import React from 'react';

import PropTypes from 'prop-types';

import Button from '@material-ui/core/Button';

import Typography from '@material-ui/core/Typography';

import { withStyles } from '@material-ui/core/styles';

import Link from 'next/link';

const styles = theme => ({

  root: {

    textAlign: 'center',

    paddingTop: theme.spacing.unit * 20,

  },

});

function About(props) {

  const { classes } = props;

  console.log('classes..props',classes);

  return (

    <div className={classes.root}>

      <Typography variant="h4" gutterBottom>

        Material-UI

      </Typography>

      <Typography variant="subtitle1" gutterBottom>

        about page

      </Typography>

      <Typography gutterBottom>

        <Link href="/">

          <a>Go to the main page</a>

        </Link>

      </Typography>

      <Button variant="contained" color="primary">

        Do nothing button

      </Button>

    </div>

  );

}

About.propTypes = {

  classes: PropTypes.object.isRequired,

};

export default withStyles(styles)(About);


//app.js

import React from 'react';

import App, { Container } from 'next/app';

import Head from 'next/head';

import { MuiThemeProvider } from '@material-ui/core/styles';

import CssBaseline from '@material-ui/core/CssBaseline';

import JssProvider from 'react-jss/lib/JssProvider';

import getPageContext from '../src/getPageContext';

class MyApp extends App {

  constructor() {

    super();

    this.pageContext = getPageContext();

  }

  componentDidMount() {

    // Remove the server-side injected CSS.

    const jssStyles = document.querySelector('#jss-server-side');

    if (jssStyles && jssStyles.parentNode) {

      jssStyles.parentNode.removeChild(jssStyles);

    }

  }

  render() {

    const { Component, pageProps } = this.props;

    return (

      <Container>

        <Head>

          <title>My page</title>

        </Head>

        {/* Wrap every page in Jss and Theme providers */}

        <JssProvider

          registry={this.pageContext.sheetsRegistry}

          generateClassName={this.pageContext.generateClassName}

        >

          <MuiThemeProvider

            theme={this.pageContext.theme}

            sheetsManager={this.pageContext.sheetsManager}

          >

            {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}

            <CssBaseline />

            {/* Pass pageContext to the _document though the renderPage enhancer

                to render collected styles on server-side. */}

            <Component pageContext={this.pageContext} {...pageProps} />

          </MuiThemeProvider>

        </JssProvider>

      </Container>

    );

  }

}

export default MyApp;

nextjs-demo的更多相关文章

  1. 通过一个demo了解Redux

    TodoList小demo 效果展示 项目地址 (单向)数据流 数据流是我们的行为与响应的抽象:使用数据流能帮我们明确了行为对应的响应,这和react的状态可预测的思想是不谋而合的. 常见的数据流框架 ...

  2. 很多人很想知道怎么扫一扫二维码就能打开网站，就能添加联系人，就能链接wifi，今天说下这些格式，明天做个demo

    有些功能部分手机不能使用,网站,通讯录,wifi基本上每个手机都可以使用. 在看之前你可以扫一扫下面几个二维码先看看效果: 1.二维码生成 网址 (URL) 包含网址的 二维码生成 是大家平时最常接触 ...

  3. 在线浏览PDF之PDF.JS （附demo）

    平台之大势何人能挡? 带着你的Net飞奔吧!:http://www.cnblogs.com/dunitian/p/4822808.html#skill 下载地址:http://mozilla.gith ...

  4. 【微框架】Maven +SpringBoot 集成 阿里大鱼 短信接口详解与Demo

    Maven+springboot+阿里大于短信验证服务 纠结点:Maven库没有sdk,需要解决 Maven打包找不到相关类,需要解决 ps:最近好久没有写点东西了,项目太紧,今天来一篇 一.本文简介 ...

  5. vue双向数据绑定原理探究(附demo)

    昨天被导师叫去研究了一下vue的双向数据绑定原理...本来以为原理的东西都非常高深,没想到vue的双向绑定真的很好理解啊...自己动手写了一个. 传送门 双向绑定的思想 双向数据绑定的思想就是数据层与 ...

  6. Android Studio-—使用OpenCV的配置方法和demo以及开发过程中遇到的问题解决

    前提: 1.安装Android Studio(过程略) 2.官网下载OpenCV for Android 网址:http:opencv.org/downloads.html 我下载的是下图的版本 3. ...

  7. iOS之ProtocolBuffer搭建和示例demo

    这次搭建iOS的ProtocolBuffer编译器和把*.proto源文件编译成*.pbobjc.h 和 *.pbobjc.m文件时,碰到不少问题! 搭建pb编译器到时没有什么问题,只是在把*.pro ...

  8. 钉钉开放平台demo调试异常问题解决：hostname in certificate didn't match

    今天研究钉钉的开放平台,结果一个demo整了半天,这帮助系统写的也很难懂.遇到两个问题: 1.首先是执行demo时报unable to find valid certification path to ...

  9. 无限分级和tree结构数据增删改【提供Demo下载】

    无限分级 很多时候我们不确定等级关系的层级,这个时候就需要用到无限分级了. 说到无限分级,又要扯到递归调用了.(据说频繁递归是很耗性能的),在此我们需要先设计好表机构,用来存储无限分级的数据.当然,以 ...

  10. 轻量级通信引擎StriveEngine —— C/S通信demo（附源码）

    前段时间,有几个研究ESFramework的朋友对我说,ESFramework有点庞大,对于他们目前的项目来说有点“杀鸡用牛刀”的意思,因为他们的项目不需要文件传送.不需要P2P.不存在好友关系.也不 ...

随机推荐

  1. nodejs应用离线安装部署、卸载

    公司写的文档,直接粘贴过来了: 本文档提供node应用一键安装.部署.卸载说明,包含对应脚本文件 默认版本:1.nodejs:v6.11.2.linux-x642.全局npm包:pm2.supervi ...

  2. JS获取今天年月日

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. LocalStorage和sessionStorage之间的区别

    众所周知,自从HTML 5 标准出现之后,本地化存储一度成为热搜的关键词.在HTML 5 最开始时,本地存储有两种方式:一种是web Storage,另一种是web SQL.由于web SQL的实现是 ...

  4. Window ssh免密登录到远程Linux服务器

    SSH采用的是”非对称密钥系统”,即耳熟能详的公钥私钥加密系统. 1. 基于口令的安全验证 这种方式使用用户名密码进行联机登录,一般情况下我们使用的都是这种方式.整个过程大致如下: (1)客户端发起连 ...

  5. Java中的继承：父类和子类的关系

    一.父类引用指向子类对象时 1.若子类覆盖了某方法,则父类引用调用子类重新定义的新方法 2.若子类未覆盖某方法,则父类引用调用父类本身的旧方法 3.若子类覆盖了某属性,但父类引用仍调用父类本身的旧属性 ...

  6. drupal7 自定义登录&找回密码页面，注意事项

    1.登录页面的 $form['form_id'] 和 $form['form_build_id'],是这样输出的: <?php print drupal_render($form['form_i ...

  7. 简析 Tomcat 、Nginx 与 Apache 的区别

    简析 Tomcat .Nginx 与 Apache 的区别 本文讲的是简析 Tomcat .Nginx 与Apache的区别, 经常在用 apache 和 tomcat 等这些服务器,可是总感觉还是不 ...

  8. 软工读书笔记 week3 （《黑客与画家》上）

    一.何谓黑客? 黑客,在我们大多数普通人眼里,就是入侵计算机的人,通常还与干坏事挂钩.而书中告诉我们,这 并不是它的真正含义.而要想理解这本书,就要首先理解什么是黑客. 黑客这个词最初起源时,完全是一 ...

  9. github连接提示

    解决办法: 1,将连接方式从http更换为ssh.注意,github.com后面一定有(冒号): git remote rm origin git remote add origingit@githu ...

  10. c# 设计模式 之：简单工厂、工厂方法、抽象工厂之小结、区别

    很多时候,我发现这三种设计模式难以区分,常常会张冠李戴闹了笑话.很有必要深入总结一下三种设计模式的特点.相同之处和不同之处. 1 本质 三个设计模式名字中都含有“工厂”二字,其含义是使用工厂(一个或一 ...