最近一直在搗鼓Next專案，Next.js是一個基於React.js的服務端ssr渲染框架，能夠讓你的react頁面擁有SEO功能。

Next.js的star高達58.8K+。一款非常受開發者青睞的React SSR框架。

https://www.nextjs.cn/https://github.com/vercel/next.js

專案簡介

Next-WebChat 基於next.js+react+redux+antd+rlayer等技術開發的PC桌面端聊天例項。實現了發現訊息/表情gif、圖片/影片預覽、彈窗選單、紅包/朋友圈等功能。

技術實現技術框架：Next.js+React.js+ReduxUI元件庫：Antd（螞蟻金服PC桌面端元件庫）彈框元件：RLayer字型圖示：阿里iconfont字型圖示庫動態圖片：next-images（透過require動態引入本地圖片）

效果預覽

react自定義彈窗元件

專案中用到的所有彈窗功能均是自己開發的RLayer.js彈出框元件。

前段時間有分享過一篇關於react.js實現自定義彈窗元件，感興趣的可以去看看。

react自定義虛擬捲軸元件

專案中用到的捲軸均是基於react.js構建的輕量級美化捲軸元件RScroll。支援原生捲軸、是否自動隱藏、捲軸尺寸/層級/顏色等功能。

由於之前有過一篇分享文章，這裡就不作過多的介紹了。

Next.js公共佈局

next.js中自定義公共佈局模板，在layouts目錄下的index.js頁面。

Next.js聊天模組

聊天編輯器區域單獨抽離了一個元件，用來進行聊天輸入處理。

// react實現contenteditable功能return (	<div 		ref={editorRef}		className="editor"		contentEditable="true"		dangerouslySetInnerHTML={{__html: state.editorText}}		onClick={handleClicked}		onInput={handleInput}		onFocus={handleFocus}		onBlur={handleBlur}		style={{userSelect: 'text', WebkitUserSelect: 'text'}}>	</div>)

編輯器支援多行文字輸入、游標處插入表情、貼上截圖傳送、輸入連結等功能。

如上圖：影片播放是基於rlayer彈窗實現。

handlePlayVideo = (item, e) => {	rlayer({		content: (			<div className="flexbox flex-col" style={{height: '100%'}}>				<div className="ntDrag__head" style={{color:'#696969',padding:'0 60px 0 15px',lineHeight:'42px'}}><i className="iconfont icon-bofang"></i> 影片預覽</div>				<div className="ntMain__cont flex1 flexbox flex-col">					{/* 影片video */}					<video className="vplayer" src={item.videosrc} poster={item.imgsrc} autoPlay preload="auto" controls						x5-video-player-fullscreen="true"						webkit-playsinline="true"						x-webkit-airplay="true"						playsInline						x5-playsinline="true"						style={{height: '100%', width: '100%', objectFit: 'contain', outline: 'none'}}					/>				</div>			</div>		),		layerStyle: {background: '#f6f5ef'},		opacity: .2,		area: ['550px', '450px'],		drag: '.ntDrag__head',		resize: true,		maximize: true,	})}

聊天區域還支援拖拽傳送圖片功能。

handleDragEnter = (e) => {	e.stopPropagation()	e.preventDefault()}handleDragOver = (e) => {	e.stopPropagation()	e.preventDefault()}handleDrop = (e) => {	e.stopPropagation()	e.preventDefault()	console.log(e.dataTransfer)	this.handleFileList(e.dataTransfer)}// 獲取拖拽檔案列表handleFileList = (filelist) => {	let files = filelist.files	if(files.length >= 2) {		rlayer.message({icon: 'error', content: '暫時支援拖拽一張圖片', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})		return false	}	for(let i = 0; i < files.length; i++) {		if(files[i].type != '') {			this.handleFileAdd(files[i])		}else {			rlayer.message({icon: 'error', content: '目前不支援資料夾拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})		}	}}handleFileAdd = (file) => {	if(file.type.indexOf('image') == -1) {		rlayer.message({icon: 'error', content: '目前不支援非圖片拖拽功能', shade: true, layerStyle: {background:'#ffefe6',color:'#ff3838'}})	}else {		let reader = new FileReader()		reader.readAsDataURL(file)		reader.onload = function() {			let img = this.result			console.log(img)		}	}}

大家如果感興趣的話，可以試一試。