Introducción a Next.js

La aplicación web de ejemplo zeit/nextgram ejemplifica lo básico en Next.js

Veremos esta funcionalidad completa en el ejemplo

• Automatic transpilation and bundling (with webpack and babel)

• Hot code reloading

• Server rendering and indexing of ./pages

• Static file serving. ./static/ is mapped to /static/

• Tareas

  • Clonar, instalar y correr app
  • Repasar el código

Clonar, instalar y correr app

git clone https://github.com/zeit/nextgram.git
cd nextgram
npm install
npm run dev

Si necesitás correr el app en modo dev (desarrollo) pero con otro puerto, editar está línea:

...
  "scripts": {
    "dev": "next",       <-----
    "build": "next build",
    "start": "NODE_ENV=production next start",
    "lint": "standard"
  }
...

Para que se vea así:

"dev": "next -p 5100",

(Ver Issue 102 Next Repo)

Repasar el código

Hay tres páginas que a su vez invocan dos componentes via import:

• pages/index.js
  • components/modal components/frame // Photo
• pages/photo.js
  • components/frame // Photo
• pages/profile.js