Next.js se está volviendo un framework de desarrollo popular entre los desarrolladores JavaScript por diversas razones, pero a mí me gusta por el uso de React.js para el frontend y como desarrollador que ya se sabe manejar en Bootstrap con AdminLTE me gustó la idea de integrarlos y lo realicé de la siguiente forma.
Instalar next y react con el siguiente comando npm
npm install next react react-domPara iniciar con Next debemos configurar package.json, crear la carpeta pages y dentro de pages crear el archivo index.js. Creamos la carpeta pages:
mkdir pagesCreamos o editamos el archivo package.json con las siguientes lineas:
{
"scripts": {
"dev": "next",
"build": "next build",
"start": "next start"
}
}Y creamos el archivo pages/index.js
export default () =>Hello React, Next and Node!!!
Ya con esto tenemos un página con React, Next y Node funcionando en nuestro local. Vamos a desplegar modo desarrollo con:
npm run devComo pueden ver en consola, al visitar localhost:3000 pueden ver el mensaje escrito en pages/index.js
Ahora vamos a implementar Bootstrap 4 y AdminLTE con SASS usando el paquete @zeit/next-sass
npm install @zeit/next-sass node-sassDebemos indicarle a Next que debe cargar el paquete en cada ejecución, para eso creamos un archivo llamado next.config.js
const withSass = require('@zeit/next-sass')
module.exports = withSass()Hacemos nuestro primer archivo scss para las pruebas en styles/styles.scss
$color: blue;
.color {
color: $color;
}Ajustamos pages/index.js para las primeras pruebas, quedando de la siguietne forma
import '../styles/styles.scss' export default () =>Hello React, Next and Node!!!
Ya tenemos SCSS en el proyecto, pasamos a instalar los paquetes de Bootstrap y AdminLTE. Primero debemos instalar AdminLTE versión 2 y luego intalamos la versión 3.
npm install bootstrap admin-lte
npm install [email protected]Editamos el archivo styles/styles.scss quedando de la siguiente forma
/**
* App entry scss file
*
* @url https://getbootstrap.com/docs/4.0/getting-started/theming/
* @url https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-precompiled-sass
*/
//$blue: purple; // Override variables here to style accordingly
@import '~bootstrap/scss/bootstrap';
@import "~admin-lte/build/scss/AdminLTE-raw.scss";Agregamos el pages/_document.js que es el layout principal
import Document, {Head, Main, NextScript} from 'next/document'
export default class MyDocument extends Document {
render() {
return (
{/* This provides all admin-lte functionality - we copied the files to our static directory above */}
Copiamos unos archivos estáticos a la carpeta static
mkdir static
cp node_modules/admin-lte/dist/js/adminlte.js static/
cp node_modules/admin-lte/dist/js/adminlte.js.map static/
cp node_modules/admin-lte/dist/js/adminlte.min.js static/
cp node_modules/admin-lte/dist/js/adminlte.min.js.map static/Ahora creamos la carpeta donde colocaremos los diferentes layouts del proyecto
mkdir -p components/LayoutCreamos nuestro primer layout en components/Layout/AdminContent.js con este contenido
import PropTypes from 'prop-types';
const AdminContent = (props) => {
return
{props.title &&
{props.title}
{props.titleButton && props.titleButton}
}
{props.children}
};
AdminContent.propTypes = {
title: PropTypes.string,
titleButton: PropTypes.element,
};
export default AdminContent;
El siguiente layout es components/Layout/AdminControlSidebar.js
const AdminControlSidebar = (props) => {
return
};
export default AdminControlSidebar;
Vamos con components/Layout/AdminFooter.js
import PropTypes from 'prop-types';
const AdminFooter = (props) => {
if (!props.leftContent && !props.rightContent) {
return null;
}
return
};
AdminFooter.propTypes = {
leftContent: PropTypes.element,
rightContent: PropTypes.string,
};
export default AdminFooter;
Ahora con components/Layout/AdminHeader.js
import Link from 'next/link';
const AdminHeader = (props) => {
return
};
export default AdminHeader;
components/Layout/AdminLayoutHoc.js
import "../../styles/styles.scss"
import AdminHeader from "../../components/Layout/AdminHeader";
import AdminSidebar from "../../components/Layout/AdminSidebar";
import AdminControlSidebar from "../../components/Layout/AdminControlSidebar";
import AdminContent from "../../components/Layout/AdminContent";
import PropTypes from 'prop-types';
/**
* Main admin layout - A Higher Order Component
*/
class AdminLayoutHoc extends React.Component {
render() {
return
{this.props.children}
I must be an element }/>*/}