Configuración y uso inicial de un proyecto Next.js con Contentful

Clase 6 de 19 • Curso de Next.js: Sitios Estáticos y Jamstack

Resumen

Git tag: 0-inicio
Comando: git checkout -b dev 0-inicio

German Moren

student•

Para los que no les compila: Ir a /ui/theme.ts y en la primer linea poner el siguiente codigo

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

Aunque dice que esta deprecated, tambien probar con

import { createTheme } from '@material-ui/core/styles'
import { grey, common, lightGreen } from '@material-ui/core/colors'

const muiTheme = createTheme()

// It matches tailwind.config.js
const fontSerif = `'Cormorant Garamond', ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;`

// Build your own theme with the Color Theme tool
// @see https://material.io/resources/color/
export const theme = createTheme({

en las primeras 11 lineas.

Jair Neri

student•

Gracias bro

Marcelo Oggero

student•

Exacto me paso y lo solucioné de esta manera. Gracias👍

Miguel Hernández Casiano

student•

Si al correr el comando yarn dev les sale este este error: .

Error: error:0308010C:digital envelope routines::unsupported . Antes de ejecutar yarn dev ejecuten el siguiente comando: . export NODE_OPTIONS=--openssl-legacy-provider . Y con eso debería funcionar normalmente

Andrés Gomez

student•

Gracias por la solución, me pasó con la ultima version de NodeJS (18.7.0)

Jesus Alberto Garzon Castillo

student•

companeros a los que sigan estas instrucciones y no les corra solo borren la cache de su navegador , Presiona Ctrl + Shift + Delete (en Windows/Linux) o Cmd + Shift + Delete (en macOS) para abrir la ventana de "Borrar datos de navegación" o "Borrar historial de navegación" y ya corre

reacosta7383

student•

Rony Porraz Vargas

student•

Aqui esta el proyecto del profesor en vercel, se ve increible! 😱😱😱 https://platzi-plantpedia.vercel.app/es

Eduardo Fortuna

student•

Que tema y font utiliza el profesor? Se ve increible

Camilo José Mezú Mina

student•

Creo que profesor utiliza el tema de tailwind https://marketplace.visualstudio.com/items?itemName=praveenpuglia.tailwind-breeze

Jesús Daniel Medina Cruz

student•

A alguien más les da este error?

Initial locale argument was not passed into serverSideTranslations

Jonathan 🦑 Alvarez

teacher•

Hola Jesús!

Si configuraste next-i18next.config.js y next.config.js? https://github.com/jonalvarezz/platzi-plantpedia/blob/main/next-i18next.config.js

También asegúrate de reiniciar el servidor para tomar los nuevos cambios de configuración.

Saludo

Federico Noya

student•

tengo el mismo problema.

brandon james grimaldo moscote

student•

voy por esta parte y todavía sigue importando los assets jajaj.

Manuel Cañizares

student•

es una de las criticas para la plataforma, los cursos son muy largos y en parte se debe a que los profes hablan mucho.

Daniel Aguirre

student•

Código desactualizado, perjudica los alumnos nuevos

Lalo Díaz

student•

Para actualizar el material-ui en la parte del theme

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

Luis Román

student•

Salía un error al correr el yarn dev ya que el createMuiTheme fue descontinuado y remplazado con createTheme

https://github.com/mui-org/material-ui/issues/27172

Pol Valle

student•

Error al ejecutar?

Asegúrate de tener instalado nvm (Node Version Manager) en tu sistema. Si no lo tienes instalado, puedes instalarlo utilizando las instrucciones proporcionadas en la página de GitHub de NVM.

Una vez que hayas instalado nvm, puedes usarlo para instalar una versión de Node.js anterior y estable. Por ejemplo, podrías instalar Node.js 16.13.0 ejecutando el siguiente comando en la terminal:

nvm install 16.13.0

Luego puedes usar nvm para cambiar a esta versión de Node.js:

nvm use 16.13.0

Luego, intenta nuevamente ejecutar tu proyecto.

Ulqernesh Karvenae

student•

Excelente, muchas gracias funciono

Humberto Asca

student•

He llegado hasta la lección 6 y con diferentes issues. He leído los comentarios de todoss hasta esta lección y no tengp forma de habilitar la app basado en los pasos que se siguen. He lideado con tratar de resolverlo y varias librerías están desfasadas, obsoletas.

Ejecuté: npm audit fix --force

luego: npm run build

y genera el error:

> platzi-nextjs-plus@0.1.0 build
> next build

warn  - Invalid next.config.js options detected: 
warn  -     The root value has an unexpected property, future, which is not in the list of allowed properties (amp, analyticsId, assetPrefix, basePath, cleanDistDir, compiler, compress, configOrigin, crossOrigin, devIndicators, distDir, env, eslint, excludeDefaultMomentLocales, experimental, exportPathMap, generateBuildId, generateEtags, headers, httpAgentOptions, i18n, images, modularizeImports, onDemandEntries, optimizeFonts, output, outputFileTracing, pageExtensions, poweredByHeader, productionBrowserSourceMaps, publicRuntimeConfig, reactStrictMode, redirects, rewrites, sassOptions, serverRuntimeConfig, skipMiddlewareUrlNormalize, skipTrailingSlashRedirect, staticPageGenerationTimeout, swcMinify, target, trailingSlash, transpilePackages, typescript, useFileSystemPublicRoutes, webpack).
warn  - See more info here: https://nextjs.org/docs/messages/invalid-next-config
info  - Linting and checking validity of types ..warn  - Minimum recommended TypeScript version is v4.3.2, older versions can potentially be incompatible with Next.js. Detected: 4.2.4
info  - Linting and checking validity of types .Failed to compile.

./pages/_app.tsx:11:6
Type error: Type '{ children: Element; }' has no properties in common with type 'IntrinsicAttributes'.

   9 | 
  10 |   return (
> 11 |     <UIProvider>
     |      ^
  12 |       <Component {...pageProps} />
  13 |     </UIProvider>
  14 |   )

Podría alguien ayudarme en este proceso de aprendizaje?

Angelo Rivera

student•

El curso tiene 2 años de antiguedad, me parece. Ahora estamos en Next Js 13 y a cambiado mucho el frameworks y librerias usadas. Aunque todo es migragble con tiempo e investigacion, si creo que deberian dar ese aviso para las personas que empiecen a llegar este curso ya en septiembre 2023.

Wilmer Nuñez

student•

Nadie especifica el tipo de error y su posible solución, solo lo sueltan al garete sin mayores referencias, mejoremos porfa.

Angelo Rivera

student•

Cesar González Caballero

student•

Si a alguiien le da error:

Please install @types/react by running:

yarn add --dev @types/react

Usen uno de estos dos comandos:

npm install --save-dev @types/react@18.0.1

yarn add -D @types/react@18.0.1

Dependiendo si usan npm o yarn

Sergio Lopez

student•

No me funciona el comando de contentful

Miguel Hernández Casiano

student•

Sería bueno que proporcionaras más contexto como el código o capturas de mensaje de lo que introduces y lo que te sale.

De entrada, podría decir que o bien, no instalaste el CLI o también puede ser que te haya faltado algún comando intermedio que se te haya pasado, o bien un typo