Это видео недоступно.
Сожалеем об этом.
Nextjs Portafolio Simple | Ejemplo Práctico de Next.js
HTML-код
- Опубликовано: 24 фев 2021
- En este ejemplo práctico de Nextjs aprenderemos a crear una aplicación simple que nos podrá servir como portafolio para mostrar nuestros trabajos de desarrollo web y también para practicar también conceptos de HTML, CSS, Javascript, React, Bootstrap, y sobre todo Next.js.
Código del ejemplo:
github.com/Faz...
🖥️ Videos Recomendados:
curso de nextjs ➞ • Ionic | Generar Apk de...
React Bootstrap Cards ➞ • React Cards | React & ...
React useContext ➞ • React useContext Ejemp...
React & Stripe ➞ • React & Stripe | Pagos...
React & Github pages ➞ • Github Pages & React |...
🛍 Descuentos:
NordVPN ➞ 68% de descuento en plan de 2 años ➞ Código: fazt
👨💻 ¿Qué servicios utilizo?
Kite ➞ bit.ly/3dPzXHe
NordVPN ➞ bit.ly/2Te7p0J
Hostinger ➞ www.hostg.xyz/...
Cloudinary ➞ bit.ly/3ohNlJ7
Namecheap ➞ namecheap.pxf.io/ErDe9
🌐 Redes:
Fazt Web ➞ www.faztweb.com/
Facebook ➞ / fazttech
Instagram ➞ / fazttech
Twitter ➞ / fazttech
Telegram ➞ t.me/fazttech
Twitch ➞ / fazttech
Slack ➞ bit.ly/3dPqCPT
Discord ➞ / discord
Blog ➞ blog.faztweb.com
📩 Contacto:
➞ fazt@faztweb.com
#react #nextjs #portfolio
![Baby Kia - WYG (feat. LAZER DIM 700) [Official Music Video]](http://i.ytimg.com/vi/avlLsOH_oJc/mqdefault.jpg)
min 15:00 explicación de _app.js
min 29:47 explicación de la carpeta public
min 35:55 explicación de _document.js
min 1:11:46 navegación
min 1:30:30 explicación de _error.js
min 1:45:36 enrutado
Acabas de enseñarme la potencia de Next de la forma más rápida y entendible. Es flipante joder.
5 años desde la primera versión de React y acaban de simplificarlo en eso 😶🤯brutal.
Eres grande Fazt
Cracks de crackens. Cada vez mejores videos..que capo que Sos Fabi.. Sos un referente Posta.!!
Casi no hago esto pero no puedo dejar de felicitarte, excelente explicación, sin desperdicios!, tienes todo lo que se necesita para ser un ink master.
Los que no pudieron poner el menu blog y git a la derecha, aca la solución:
etc...
gracias crackkkkk
Gracias Fazt he aprendido mucho del desarrollo web estudiando tus vídeos y hoy agradecido que incluso encontré mi primer trabajo como desarrollador web.
Me encantan tus vídeos, en verdad siempre te estaré agradecido, gracias a ti aprendí Node.js y express
Grande Fazt, justo he estado aprendiendo next.js y tu video me viene de maravilla, gracias crack.
Un saludo desde Japon, muchas gracias por tu tiempo que dedicas a tus videos y siempre me pregunto como puede haber personas que ponen Dislike.
2 años han pasado , excelente proyecto , ahora ya andamos con Next13 Typescript y Tailwind ajajaj , aqui estabamos en Next 10 y Bootstrap
Gracias Fazt, la verdad me sirvio mucho tu video, eres el heroe de muchos latinos
Excelentisimo como siempre Fazt!!! Muchas gracias por compartir tus conocimientos!!!
uah fazt, que xulo next.js :) que bien que también te guste y que vayas a sacar más cursos de él! :D muchas grácias por todo, cuando tenga curro de programador mi sueño seria coger un avion y venir a darto un pedazo de abrazo! Gracias maestro!
Gracias Fazt, Lo vi completo y creo que puede ser que nextjs se vuelva mi Frameworks de trabajo, gracias.
Gracias Fazt por todo lo que nos das, no te merecemos xD
Muy buen video, sería interesante un proyecto web utilizando flutter, ya que promete bastante.
Excelente, te falta un video de Strapi y Next que tenga registro, login y upload de avatar. Saludos.
Crack como siempre. Estaba esperando un tutorial asi sobre Nextjs
Fazt eres una máquina, que pinche velocidad de desarrollo, cuando sea grande quiero codear así de pro
Genio! muchas gracias por tu aporte! la verdad estoy viendo como funciona NextJs por todos lados y tu video es mas que excelente! un +100 te ganaste! no te das una idea como me ayuda a entender NextJs ahora que vi este video. :)
¡¡¡Excelente video!!! Muy bien explicado y en forma concisa y entendible...😶
Excelente tutorial, muy claro explicando y aplicando conceptos. ¿Podrías subir un video donde expliques cómo subir una aplicación de Next.js a un servidor? Gracias por compartir tus conocimientos, crack! :D
Excelente Proyecto @Fazt. la verdad que se pueden hacer grandes cosas con este Framework, me ha encantado, y justo voy a comenzar aplicarlo ahora, ya que como vemos ahorra mucho tiempo en desarollo, y esa parte de agotamiento con js queda atras, podemos hacer literalmente cualquier tipo de aplicación. Muchas gracias por comparir, esperamos mas videos sobre Nex.js
Excelente contenido Fazt la combinacion de Nextjs , React , Boostrap y uno que otro modulo es bastaste interesante sigo aprendiendo mucho con tus videos
Justo lo que necesitaba Gracias rey
Ay chiamoo tengo que hacer esto !!!! Gracias
Excelente tutorial! increible el potencial de next. No he logrado es desplegarlo en vercel, o heroku. Podrías considerar hacer un tutorial de como desplegar un proyecto de nextjs y los scripts que debería contener el package.json. gracias!!!
Buena idea voy a crear un tutorial de despliegue de nextjs
Fazt eres el mejor gracias gracias gracias gracias
gracias..
Excelente vídeo! En el Navbar, en lugar utilizar sólo la etiqueta para cada elemento , podría ponerla dentro de la etiqueta de Next.js? Si es así, habría algún beneficio de pre-renderizado?
VIDEO:
Features
....
DUDA:
Features
....
GRACIAS!
Gracias por compartir tu conocimiento. Excelente ejemplo práctico.. Saludos,
Un proyecto de Red Social aplicando todo esto sería espectacular!!! Gracias!!!!
Gracias por el video, todo muy claro y fácil de seguir. Saludos
Grande como siempre mi hermano, Gracias por tanto conocimiento
Gracias Fazt, muy buen vídeo
muy bien fazt eres el mejor gracias
Gracias!! es exactamente lo que estaba esperando ♥
Muchas gracias tremendo trabajo haces por nosotros eres un grande
Soy solo yo o Fazt anda muy fast hablando hoy? :V
Puedes poner la velocidad del vídeo a 0.75x o 0.5x para que no le pierdas el ritmo 🤭
@@devapps2211 en muchos otros canales tienen que aumentar la velocidad, aquí es todo lo contrario 😁
Gracias por tan buen video! Todo explicado excelentemente en sólo 2 horas!
Fazt, podrías hacer un video sobre deploy de una aplicación con NextJS?
Excelente Video, claro si estuviera con TypeScript seria mucho mejor. Pero no tiene desperdicio, muchas gracias Fazt.
Excelente video Fazt! Una consulta, en 1:59, el formato la url que se genera no funciona si la quiero usar para el SEO (de hecho un F5 ya genera un 404), cómo leo esa estructura para poder mostrar el post?
Increíbles videos 👏, no sabes cuanto me ayudan
super siempre con videos muy buenos, ojala sacaras mas beneficios para los que te apoyamos con la subscricion de youtube.
Estoy por empezar un proyecto decidi dejar por un lado php y no porque sea un lenguaje malo sino porque react js es mas rapido e interactivo pero navegando por la documentacion de next js y viendo este video optare por esta tecnologia de react
Muchas gracias por compartir tu conocimiento Fazt. me podrías recomendar algún teclado?.
Saludos.
Buenísimo, gracias
Hola Fazt sería genial si puedes hacer un video como desplegarlo. He tenido miles de problemas para exportarlo cuando es SSR
Gracias por semejante material👏❤️
Grande Fazt !!!!!!!!
No puedo tirar hacia la derecha los componentes Blog y Github, Tengo la parte nav igual pero no hizo nada en la modificación del div. Ayuda por favor, gracias!
Y luego, la imágen me queda muy grande igual con img fluid
Hola fatz, buen video, una consulta, para las landing page en NEXTJS no se utiliza getstaticprops ni getstaticpaths, solo se trabaja normal aplicando layout y eso, pero luego es todo parecido a como se trabaja con react normal verdad?
Fazt eres un grande de verdad, sera posible que hagas videos sobre laravel? la verdad seria genial
Excelente video, estaría interesante uno de Next con prismic y tailwindcss
Muchas gracias Fazt por este proyecto y por todos los aportes que siempre nos regalas. Hice el portfolio y quedó muy bien. El problema es que al hacer el deploy en Vercel me da un error y no puedo realizarlo. Lo mismo me pasa en Netlifi. El error es "Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/parser' is not defined by "exports" in /vercel/path0/node_modules/next/node_modules/postcss/package.json". A alguien más le sucede esto? donde hicieron deploy de sus portfolios?
Hola a todos, tengo este problema para hacer deploy en netlify ... Building
Failed me aconsejas?
exlente fazt aprendi demasiado, para el proximo de next porfaa utiliza Tailwind.
holas abe spor que me salen lineas en mi pagina cuando creo un proyecto???
Excelente Tutorial, pero realmente no puedo hacer el Deploy en Vercel o Heroku, podrias explicar como hacer el deploy de este portfolio, con la configuración necesaria en package.json y demás?
Gracias Fazt ERES UN GRANDE !!!! una pregunta usas linux habitualmente para desarrollar? o usas windows y linux dependiendo del proyecto? GRACIAS Nuevamente un Saludo.
porque query params y no las dynamic routes?
la programación puedes hacer las cosas de 10 maneras diferentes, no es una camisa de fuerza
Alguien que me ayude, a la hora de hacer el clg con los props para poder extraer el user, no me manda el arreglo
Fazt tengo un problema con esta aplicación cuando hago el deploy en vercel y la veo desde el móvil la primera vista ocupa la mitad del viewport el problema desaparece cusndo hago scroll. Alguna idea?
min 12:35 bootstrap
min 15:00 explicación de _app.js
min 29:47 explicación de la carpeta public
min 35:55 explicación de _document.js
min 1:11:46 navegación
min 1:30:30 explicación de _error.js
min 1:45:36 enrutado
¿Como puedo desplegar esta aplicación en una web?
Como github pages o heroku, ¿Solo subo
el proyecto? o debo hacer algo más?
si alguno esta usando la version 5.0 del bootswatsh en vez de ml-auto tienen que usar ms-auto
Hola, el responsive no me funciona, por ejemplo el carrucel o cosas asi.
Porfa si puedes hacer un tutorial de Prisma y Nextjs
Excelente idea voy a preparar algo practico pronto :)
COnsultA: como hace _document sin ser llamado en layout para ponerle el titulo a toda mi web?
Nexjs internamente añade _document,.js y _app.js en toda la aplicacion. pero en cada visto si necesitas añadir algo al head, puedes importar @next/head, y usar esta etiqueta para alterarlo:
nextjs.org/docs/advanced-features/custom-document
nextjs.org/docs/api-reference/next/head
@@FaztCode Gracias bro! te admiro! :D
Excelente como siempre. Una duda nomas, como hago para que lo lea github pages? ya que todo el código es en js. Soy nuevo en nextjs y eso me esta comiendo la cabeza hace días.
porque cuando refresco la pagina de post, me sale error 404
Excelente video master!
Pregunta: por que los post no los realizaste con rutas dinámicas?
la programación puedes hacer las cosas de 10 maneras diferentes, no es una camisa de fuerza
@@mauroinde Toda la razón Javier, pero next se destaca por esta potente herramienta. Saludos
Podrias crear un tutorial con NextJs Autenticación simple con Nodejs, Mongodb, Express y JWT; por favor
Me intereso next con este ejemplo
Excelente video Fazt, tengo una duda; porque al momento de deployar ya sea en Heroku o Vercel, marca un error en /post y menciona que no se puede leer la propiedad ‘title’, tengo el código exactamente como fuiste haciendo el desarrollo.
Saludos Master
Me pasa exactamente lo mismo :(
@@kuperrr6776 pudiste solucionarlo?
@@Holri sisi en mi comentario está el dialogo que tuve con un buen usuario y está ahí como lo solucioné, espero que te sirva!
BRUTAL !
¿Alguien sabe que tema de vscode está utilizando?
Ayuda, si subo a un repositorio un proyecto de Next es necesario subir la carpeta .next o puedo ignorarlo?
muy buen video
¿Sabes como hacer que el botón de menú funcione?
Lo lograste solucionar?
alguno pudo?
oh era re simple, agregar el script de boostrap en _document
Puedo y debería mezclar nextjs y nodejs, o es mejor react node?
nextjs es react y node. xd
next es solo react, node es node
necesitarás de ambos, tener un servidor de React para Server side rendering, no significa que tienes a node en toda su potencia.
@@mauroinde jajaja jajajajja
First Comment
A alguien mas las imagenes del blog no le cargan ? y sale como un icono chiquito ? :c
😍
Muy bueno el theme, como se llama?
Hola Braian, este tema es Dobri Next :)
como haces para que te aparezcan los emmet abbreviation de html mientras usas javascript?
Este es en caso de JSX, hay una configuracion que puedes añadir a VSCode:
añade esto en tu settings.json
{
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
}
eshwaren.medium.com/enable-emmet-support-for-jsx-in-visual-studio-code-react-f1f5dfe8809c
@@FaztCode cuando llegue a mi casa lo intento, muchísimas gracias!!!
@@FaztCode muchas gracias, funciono!!!
💖👏
Hola gente, si están mirando esto con la versión 13 o posteriores de Next.JS, en el minuto 36:00 cuando Fatz explica sobre usar el tagTitle en la etiqueta Head en el _document.js, hoy por hoy Vercel modifico el codigo y ahora se recomienda pasar el title directamente desde _app.js, de la siguiente forma:
import Head from "next/head"
const MyApp = ({ Component, pageProps }) => {
return (
Portfolio
)
}
O sea el _documents.js no hay necesidad de crearlo ?
Segundo!
Muchas gracias! tremendo tutorial, tengo una pregunta: ¿hay algo así como un comando "ng build" q pueda usar para transcribir todo a JS/HTML/CSS ? Es la primera vez q uso Next y tengo esa duda, muchas gracias por la información, todo muy útil!
@Hip Hop Músic Muchas gracias en unos días termino de personalizarlo bien y hago eso para que quede más optimizado. ;)
@Hip Hop Músic Hice eso pero me sale un error ...
0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli 'C:\\Program Files\
odejs\
ode.exe',
1 verbose cli 'C:\\Users\\Kaupert\\AppData\\Roaming\
pm\
ode_modules\
pm\\bin\
pm-cli.js',
1 verbose cli 'run',
1 verbose cli 'build'
1 verbose cli ]
2 info using npm@6.14.10
3 info using node@v12.18.2
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle Portfolio@1.0.0~prebuild: Portfolio@1.0.0
6 info lifecycle Portfolio@1.0.0~build: Portfolio@1.0.0
7 verbose lifecycle Portfolio@1.0.0~build: unsafe-perm in lifecycle true
8 verbose lifecycle Portfolio@1.0.0~build: PATH: C:\Users\Kaupert\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle
ode-gyp-bin;c:\xampp1\htdocs\Portfolio
ode_modules\.bin;C:\PROGRAM FILES (X86)\COMMON FILES\ORACLE\JAVA\JAVAPATH;C:\PERL64\SITE\BIN;C:\PERL64\BIN;C:\Windows\SYSTEM32;C:\Windows;C:\Windows\SYSTEM32\WBEM;C:\Windows\SYSTEM32\WINDOWSPOWERSHELL\V1.0\;C:\PROGRAM FILES (X86)\ATI TECHNOLOGIES\ATI.ACE\CORE-STATIC;C:\PROGRAM FILES\JAVA\JDK1.8.0_201\BIN;C:\Program Files\kotlinc\bin;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\xampp1\php;C:\ProgramData\ComposerSetup\bin;C:\Program Files
odejs\;C:\Program Files\Git\cmd;C:\Program Files\Git\mingw64\bin;C:\Program Files\Git\usr\bin;C:\swigwin-3.0.12;C:\ProgramData\chocolatey\bin;C:\MinGW\bin\;c:\Program Files\Nmap;C:\Users\Kaupert\anaconda3;C:\Users\Kaupert\anaconda3\Library\mingw-w64\bin;C:\Users\Kaupert\anaconda3\Library\usr\bin;C:\Users\Kaupert\anaconda3\Library\bin;C:\Users\Kaupert\anaconda3\Scripts;C:\Users\Kaupert\AppData\Local\Programs\Python\Python38-32\Scripts\;C:\Users\Kaupert\AppData\Local\Programs\Python\Python38-32\;C:\Users\Kaupert\AppData\Local\Programs\Python\Python37-32\Scripts\;C:\Users\Kaupert\AppData\Local\Programs\Python\Python37-32\;C:\Users\Kaupert\AppData\Local\Programs\Microsoft VS Code\bin;C:\Program Files\Java\jdk1.8.0_201\bin;C:\Users\Kaupert\AppData\Roaming\Composer\vendor\bin;C:\Users\Kaupert\AppData\Roaming
pm;C:\tools
eovim\Neovim\bin;C:\Program Files (x86)\Nmap
9 verbose lifecycle Portfolio@1.0.0~build: CWD: c:\xampp1\htdocs\Portfolio
10 silly lifecycle Portfolio@1.0.0~build: Args: [ '/d /s /c', 'next build' ]
11 silly lifecycle Portfolio@1.0.0~build: Returned: code: 1 signal: null
12 info lifecycle Portfolio@1.0.0~build: Failed to exec build script
13 verbose stack Error: Portfolio@1.0.0 build: `next build`
13 verbose stack Exit status 1
13 verbose stack at EventEmitter. (C:\Users\Kaupert\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle\index.js:332:16)
13 verbose stack at EventEmitter.emit (events.js:315:20)
13 verbose stack at ChildProcess. (C:\Users\Kaupert\AppData\Roaming
pm
ode_modules
pm
ode_modules
pm-lifecycle\lib\spawn.js:55:14)
13 verbose stack at ChildProcess.emit (events.js:315:20)
13 verbose stack at maybeClose (internal/child_process.js:1021:16)
13 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:286:5)
14 verbose pkgid Portfolio@1.0.0
15 verbose cwd c:\xampp1\htdocs\Portfolio
16 verbose Windows_NT 6.1.7601
17 verbose argv "C:\\Program Files\
odejs\
ode.exe" "C:\\Users\\Kaupert\\AppData\\Roaming\
pm\
ode_modules\
pm\\bin\
pm-cli.js" "run" "build"
18 verbose node v12.18.2
19 verbose npm v6.14.10
20 error code ELIFECYCLE
21 error errno 1
y arriba en el terminal dice q detecta como undefined el título del post que se ecnuentra en profile.js, no entiendo por que.
@Hip Hop Músic sisi tiene las dobles comillas y tuve la misma sospecha en cuanto al npm run dev pero de igual forma me saltó ese error. Lo q veo q da error es eso, el post de profile.js no lo reconoce y como hay funciones q usan el title y eso me dice q no se puede poner Title of undefined :( a vos te dejó hacer eso sin errores?
@Hip Hop Músic muchas gracias, ahí veo bien eso y hago algo de research sobre esas funciones aver si encuentro forma de aplicarlo a esto, porq yo no uso ninguna api solo el json.
@Hip Hop Músic perdon me confundí, me refería al archivo profile.js donde hay unos objetos de javascript.
Saben porque no me ejecuta npm run dev ? Me dice que no reconoce next..
quizas no esta la carpeta node_modules, intentan ejecutando npm install primero
@@FaztCode lo hice y dice up to date, audited 7 packages in 1s
found 0 vulnerable
De ahí volví a ejecutar npm run dev y vuelve y dice que no se reconoce como un comando interno o externo :(
Será que debo de colocar en package Jason dev:nextjs ? Sino que en tu vídeo veo que abajo tienes el Next y yo lo tengo con nextjs
Cuál fué el problema en ruclips.net/video/Ywj6YGgE5RI/видео.html ?
Solo los más machos miran el video en velocidad 1.25x
Yo siempre veo sus videos en 1.5x o 2x xd.
Sera necesario contar con conocimientos para este tutorial ? Jeje, disculpen la pregunta
Conocimientos en React, Axel. igual se hace desde cero pero sí necesitas al menos tener bases en React
@@FaztCode oh va va gracias lo tendré en cuenta!!, me gusta mucho el contenido de tu canal, saludos !!!
¿Qué tema de VScode es ese?
Hola Ivan, este tema es Dobri Next :)
@@FaztCode Gracias. Muy buenos tus videos, llevo días haciendo tus cursos. Saludos.
Nextjs con django por favor 😭
La única razón por la que usaría next es porque vercel no me deja hacer nada con express.
19:35 cositas de windows pirata ps
Que Fue :S
Intente seguir según las instrucciones que mencionas en el video, pero al momento de crear el Layout, Next me marco una seri de errores.
despacito 🙄
solo tienes que mirar el nombre del canal bro :V