In the demo of this tutorial https://learnnextjs.com/basics/fetching-data-for-pages there's no way to change the url to be string like localhost:3000/p/batman-vs-superman instead of http://localhost:3000/p/123 ?

In the previous tutorial before that, the doc throws an open question without a solution

This is a problem. But in the real world, this won't be much of an issue because we'll use an ID to fetch data from a data server in both client and the server.

At this point in the tutorial https://learnnextjs.com/basics/navigate-between-pages/using-link , you're asked to click the About Page (referring to the one you created before) except you've made a NEW folder and cloned git clone https://github.com/arunoda/learnnextjs-demo.git

There is no about.js yet, but the tutorial assumes it. Perhaps add it to this branch at this point.

I followed the tutorial with a fresh install and encountered an error when it came to the npm run analyze command. After little investigation, I found that I get the same error after upgrading from next 4 to next 5.1.0.

"C:\Program Files\JetBrains\IntelliJ IDEA 2017.3.2\bin\runnerw.exe" "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" run analyze --scripts-prepend-node-path=auto

> [email protected] analyze D:\dev\learnnextjs-demo
> cross-env ANALYZE=1 next build

Webpack Bundle Analyzer is started at http://127.0.0.1:8888
Use Ctrl+C to close it
events.js:137
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE 127.0.0.1:8888
    at Object._errnoException (util.js:1003:13)
    at _exceptionWithHostPort (util.js:1024:20)
    at Server.setupListenHandle [as _listen2] (net.js:1366:14)
    at listenInCluster (net.js:1407:12)
    at doListen (net.js:1522:7)
    at process._tickCallback (internal/process/next_tick.js:152:19)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] analyze: `cross-env ANALYZE=1 next build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] analyze script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     D:\Cache\npm-cache\_logs\2018-03-29T16_40_48_888Z-debug.log

Just an FYI. This code styled the link with a big font

import Link from 'next/link'

const Index = () => (
  <div>
    <Link href="/about">
      <a style={{fontSize: 20}}>About Page</a>
    </Link>
    <p>Hello Next.js</p>
  </div>
)

export default Index

DevTools inspect: `About Page

The the second version did nothing.
DevTools: <a href="/about">About Page</a>

I want my 15 points!

Hi,
I'm new to react js. I'm loading image from local assets in one of my page. But its throwing below error.

How can I load use image from local assets? Please help me.

I followed your “learn next.js” tutorial which worked out pretty fine but a few days later I wanted to try our the build process without now so I tried npm run build aka next build and it ended with this error:

Error Console Output

Error: ./pages/batman-shows.js?entry
Module build failed: SyntaxError: unknown: Unexpected token (5:25)
  3 | import fetch from 'isomorphic-fetch';
  4 |
> 5 | export default (props => <BasicLayout>
    |                          ^
  6 |     <h1>Batman Shows</h1>
  7 |     <ul>
  8 |       {props.shows.map(({ show }) => <li key={show.id}>

Which is kind of strange because the original code looks like this:

My Source Code

import BasicLayout from '../layouts/BasicLayout'
import Link from 'next/link'
import fetch from 'isomorphic-fetch'


export default (props) => (
  <BasicLayout>
    <h1>Batman Shows</h1>
    <ul>
      { props.shows.map(({ show }) => (
        <li key={ show.id }>
          <Link
            as={`/s/${ show.id }`}
            href={`/show?id=${ show.id }`}>
              <a>{ show.name }</a>
            </Link>
        </li>
      ))}
    </ul>
  </BasicLayout>
)
.getInitialProps = async () => {
  const res = await fetch('http://api.tvmaze.com/search/shows?q=batman')
  const data = await res.json()

  console.log(`Show data fetched. Count: ${data.length}`)

  return {
    shows:data
  }
}

The app works fine when started with npm start. Any ideas?

Update

Even when I try to run it with npm run dev it shows the same error.

https://nextjs.org/learn/excel/lazy-loading-modules/setup

mherold-mac:learnnextjs-demo mherold$ git checkout firebase-hn
Branch 'firebase-hn' set up to track remote branch 'firebase-hn' from 'origin'.
Switched to a new branch 'firebase-hn'
mherold-mac:learnnextjs-demo mherold$ npm i
...
npm ERR! code E404
npm ERR! 404 Not Found: protobufjs@^5.0.0

When trying to deploy - I get an error from now "Error: No serverless pages were built"

error.log

Clashing with React-Dom 16.0.0

Error in C:\projects\react\hello-next\node_modules\next\dist\client\next-dev.js
Module not found: Error: Can't resolve 'react-dom/lib/ReactReconciler' in 'C:\projects\react\hello-next\node_modules\next\dist\client'
ModuleNotFoundError: Module not found: Error: Can't resolve 'react-dom/lib/ReactReconciler' in 'C:\projects\react\hello-next\node_modules\next\dist\client'
    at factoryCallback (C:\projects\react\hello-next\node_modules\webpack\lib\Compilation.js:264:39)
    at factory (C:\projects\react\hello-next\node_modules\webpack\lib\NormalModuleFactory.js:247:20)
    at resolver (C:\projects\react\hello-next\node_modules\webpack\lib\NormalModuleFactory.js:65:21)
    at asyncLib.parallel.e (C:\projects\react\hello-next\node_modules\webpack\lib\NormalModuleFactory.js:138:21)
    at C:\projects\react\hello-next\node_modules\async\dist\async.js:3861:9
    at C:\projects\react\hello-next\node_modules\async\dist\async.js:421:16
    at iteratorCallback (C:\projects\react\hello-next\node_modules\async\dist\async.js:996:13)
    at C:\projects\react\hello-next\node_modules\async\dist\async.js:906:16
    at C:\projects\react\hello-next\node_modules\async\dist\async.js:3858:13
    at resolvers.normal.resolve (C:\projects\react\hello-next\node_modules\webpack\lib\NormalModuleFactory.js:130:23)

The code in the server.js is not working. In https://github.com/arunoda/learnnextjs-demo/blob/clean-urls-ssr/server.js the correct code is displayed. This should be changed on the nextjs learn website.

https://nextjs.org/learn/basics/server-side-support-for-clean-urls/create-a-custom-server

docs typo

https://github.com/arunoda/learnnextjs-demo/tree/create-dynamic-pages/pages

In the above section the git branch you ask to be checked out is incorrect. It currently states "create-dynamic-pages" this should be "clean-urls".

Hi, I followed tutorials and then tried to deploy to zeit/now services.

I used fetching data branch (learnnextjs-demo-data-fetching) from git.
Added "build":"next build" and "start":"next start" to package.json scripts section.
Unfortunately it works only localy. On zeit/now server I get "An unexpected error has occurred" on post pages and after (reloading index page works).

Could you share more information about deploying samples to zeit/now.
Thanks

Here is the link: (deleted)

Cannot read property 'querySelectorAll' of null
TypeError: Cannot read property 'querySelectorAll' of null
at Highlight.highlightCode (http://localhost:3000/_next/db69cdf4-c316-42fb-a3b1-e9083ae1575b/webpack/6:9358:33)
at Highlight.componentDidMount (http://localhost:3000/_next/db69cdf4-c316-42fb-a3b1-e9083ae1575b/webpack/6:9347:18)
at commitLifeCycles (http://localhost:3000/_next/1513291716391/commons.js:8776:24)
at commitAllLifeCycles (http://localhost:3000/_next/1513291716391/commons.js:9952:9)
at HTMLUnknownElement.callCallback (http://localhost:3000/_next/1513291716391/commons.js:548:14)
at Object.invokeGuardedCallbackDev (http://localhost:3000/_next/1513291716391/commons.js:587:16)
at invokeGuardedCallback (http://localhost:3000/_next/1513291716391/commons.js:444:27)
at commitRoot (http://localhost:3000/_next/1513291716391/commons.js:10056:9)
at performWorkOnRoot (http://localhost:3000/_next/1513291716391/commons.js:11023:42)
at performWork (http://localhost:3000/_next/1513291716391/commons.js:10973:7)

This file and the learnnextjs.com tutorial don't seem to use any import of react.
However if I run it this way a 'React is not defined' error appears.

I can solve this by putting the following line at the start of the file.
import React from 'react';

Am I doing something wrong that this is needed?

The component in 'Styling components' is not clearly documented in the tutorial. https://learnnextjs.com/basics/styling-components/global-styles

In fact there is no page that describes what the Markdown component should be or what it means. I eventually figured it out by digging in a later branch of the repo, but could we add a bit more info on that component?

I get the following when I click any of the next/Link links:

deepForceUpdate is not a function

TypeError: deepForceUpdate is not a function
....at AppContainer.componentWillReceiveProps (http://localhost:3000/_next/1535290661890/main.js:19058:7)
....at callComponentWillReceiveProps (http://localhost:3000/_next/1535290661890/commons.js:11534:14)
....at updateClassInstance (http://localhost:3000/_next/1535290661890/commons.js:11726:7)
....at updateClassComponent (http://localhost:3000/_next/1535290661890/commons.js:13160:20)
....at beginWork (http://localhost:3000/_next/1535290661890/commons.js:13831:14)
....at performUnitOfWork (http://localhost:3000/_next/1535290661890/commons.js:15870:12)
....at workLoop (http://localhost:3000/_next/1535290661890/commons.js:15909:24)
....at renderRoot (http://localhost:3000/_next/1535290661890/commons.js:15949:7)
....at performWorkOnRoot (http://localhost:3000/_next/1535290661890/commons.js:16567:22)
....at performWork (http://localhost:3000/_next/1535290661890/commons.js:16489:7)

in AppContainer (created by Container)
in Container (created by App)
in div (created by App)
in App`

Tried updating package.json to use "next": "^6.1.1" and "react": "^16.4.0" to no avail.

Please note that this error occurs only when the rendered hyper link is clicked. It goes away if I hard-reload the page. But, of course, this defeats the purpose (in addition to being an error).

Following slap bang the "Lazy Loading Modules" set up, the Webpack Bundle Analyzer fails to show firebase in any of the bundles.

It was throwing the following error (on the current packages.json)

TypeError: Cannot read property 'replace' of undefined

Bumping next and react resolved the issue:

===

"dependencies": {
"next": "^8.0.1",
"react": "^16.8.2",
"react-dom": "^16.8.2"
}

I am following the lectures on nextjs.org/learn, but on "Fetching Data for Pages" section, the second last tutorial called "Fetch Data in Client Side" says that if you visit a post of batman app directly, you will be able to see the message printed on the server not client. But i am getting this error when i visit a post directly like http:localhost:300/p/475.

Unhandled Rejection (TypeError): Cannot read property 'replace' of undefined.

Hello, I learning nextjs but I got stucked error in dynamic url server side, my code is same like yours, but I still get error 404 not found and on terminal display error like this

Client pings, but there's no entry for page: /_error

Anyone can help me please, thanks

refrence : https://nextjs.org/learn/basics/server-side-support-for-clean-urls/create-our-custom-route

Can't remember a better tutorial and i'm terribly excited about working with 'Next' as part of my stacstrategy. Tried everything to figure out why i couldn't get 'npm run export' to execute properly. Is it a node issue?
Thanks in advance,
RL Glover

Error log file:
0 info it worked if it ends with ok
1 verbose cli [ 'C:\Program Files\nodejs\node.exe',
1 verbose cli 'C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js',
1 verbose cli 'run',
1 verbose cli 'export' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preexport', 'export', 'postexport' ]
5 info lifecycle [email protected]preexport: [email protected]
6 silly lifecycle [email protected]preexport: no script for preexport, continuing
7 info lifecycle [email protected]export: [email protected]
8 verbose lifecycle [email protected]export: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]export: PATH: C:\Program Files\nodejs\node_modules\npm\bin\node-gyp-bin;C:\PluralSight_VisualStudioCode\NEXT\learnnextjs-demo\node_modules.bin;C:\ProgramData\Oracle\Java\javapath;C:\SwiftForWindows\Swift\bin;C:\Program Files\Java\jdk1.8.0_112\bin;C:\Program Files\Docker\Docker\Resources\bin;C:\Program Files (x86)\Intel\iCLS Client;C:\Program Files\Intel\iCLS Client;C:\WINDOWS\system32;C:\WINDOWS;C:\WINDOWS\System32\Wbem;C:\WINDOWS\System32\WindowsPowerShell\v1.0;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files\Microsoft SQL Server\110\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\Tools\Binn;C:\Program Files\dotnet;C:\Program Files (x86)\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\130\Tools\Binn\ManagementStudio;C:\Program Files\Microsoft SQL Server\Client SDK\ODBC\130\Tools\Binn;C:\Program Files\Microsoft SQL Server\130\DTS\Binn;C:\ProgramData\chocolatey\bin;C:\Program Files\nodejs;C:\Program Files\Microsoft SQL Server\120\Tools\Binn;C:\Program Files (x86)\Microsoft Emulator Manager\1.0;C:\Program Files\Microsoft\Web Platform Installer;C:\Program Files (x86)\Microsoft SDKs\Azure\CLI\wbin;C:\Program Files (x86)\Microsoft SQL Server\110\DTS\Binn;C:\Program Files (x86)\Microsoft SQL Server\120\DTS\Binn;C:\Program Files (x86)\GtkSharp\2.12\bin;C:\Program Files (x86)\WinMerge;C:\Program Files\Git\cmd;C:\Program Files\Sublime Text 3;C:\Program Files (x86)\Yarn\bin;C:\Program Files (x86)\Brackets\command;C:\Users\rglov\AppData\Local\Microsoft\WindowsApps;C:\Program Files (x86)\Microsoft VS Code\bin;C:\Users\rglov\AppData\Roaming\npm;C:\Python27;C:\Program Files\Docker Toolbox;C:\Users\rglov\AppData\Local\Programs\Fiddler;C:\Program Files\Heroku\bin;C:\Users\rglov\AppData\Local\Yarn\bin;C:\ProgramData\rglov\atom\bin;C:\Program Files\MongoDB\Server\3.4\bin;%USERPROFILE%\AppData\Local\Microsoft\WindowsApps;
10 verbose lifecycle [email protected]export: CWD: C:\PluralSight_VisualStudioCode\NEXT\learnnextjs-demo
11 silly lifecycle [email protected]export: Args: [ '/d /s /c', 'next export' ]
12 silly lifecycle [email protected]export: Returned: code: 1 signal: null
13 info lifecycle [email protected]~export: Failed to exec export script
14 verbose stack Error: [email protected] export: next export
14 verbose stack Exit status 1
14 verbose stack at EventEmitter. (C:\Program Files\nodejs\node_modules\npm\lib\utils\lifecycle.js:279:16)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at EventEmitter.emit (events.js:194:7)
14 verbose stack at ChildProcess. (C:\Program Files\nodejs\node_modules\npm\lib\utils\spawn.js:40:14)
14 verbose stack at emitTwo (events.js:106:13)
14 verbose stack at ChildProcess.emit (events.js:194:7)
14 verbose stack at maybeClose (internal/child_process.js:899:16)
14 verbose stack at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd C:\PluralSight_VisualStudioCode\NEXT\learnnextjs-demo
17 error Windows_NT 10.0.15063
18 error argv "C:\Program Files\nodejs\node.exe" "C:\Program Files\nodejs\node_modules\npm\bin\npm-cli.js" "run" "export"
19 error node v7.9.0
20 error npm v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] export: next export
23 error Exit status 1
24 error Failed at the [email protected] export script 'next export'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the hello-next package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error next export
24 error You can get information on how to open an issue for this project with:
24 error npm bugs hello-next
24 error Or if that isn't available, you can get their info via:
24 error npm owner ls hello-next
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

This section states that:

If you just visit a post page directly (eg:- http://localhost:3000/p/975) you'll be able to see the message printed on the server but not in the client.

But when I try to visit a post page directly, I only get an error, both in server console and in the browser (that pink screen).

In console, I got this:

Fetched show: Not Found                                                                                                                                                                        
TypeError: Cannot read property 'replace' of undefined                                                                                                                                         
    at Post (/learnnextjs-demo/.next/dist/pages/post.js:48:26)                                                                           
    at /learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:306:16                                                    
    at measureLifeCyclePerf (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:75:12)                              
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeCompone
nt.js:305:14)                                                                                                                                                                                  
    at ReactCompositeComponentWrapper._constructComponent (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:280:21
)                                                                                                                                                                                              
    at ReactCompositeComponentWrapper.mountComponent (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:188:21)    
    at Object.mountComponent (/learnnextjs-demo/node_modules/react-dom/lib/ReactReconciler.js:46:35)                                     
    at ReactCompositeComponentWrapper.performInitialMount (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:371:34
)                                                                                                                                                                                              
    at ReactCompositeComponentWrapper.mountComponent (/learnnextjs-demo/node_modules/react-dom/lib/ReactCompositeComponent.js:258:21)    
    at Object.mountComponent (/learnnextjs-demo/node_modules/react-dom/lib/ReactReconciler.js:46:35)

And, in the browser:

Note: and, of course, the code it's the same that on examples. The error 500 in browser it's because I did a refresh in that screencapture, but the rest keeps happening when you try to access directly to the page, even when you don't hit f5.

This section states:

▲ZEIT now will detect the “npm build” script and build it for you when you deploy.

Some hosting providers do not have something like that. In that case, you can build your app locally with:

npm run build

Then deploy the app with the .next directory and only keep the start npm command in your package.json.

But it doesn't seem pretty clear to me. I mean, the last phrase.

with the .next directory

This means you need to include .next, together with the rest, when deploying? This mean you need to use now from inside of .next? Or what?

only keep the start npm command in your package.json

¿? Delete all the other scripts from package.json? And them needing to do them manually every time? Or what?

Thanks for your time :).

Note: I will still be trying ZEIT now, but I also want to understand this well.

Hi Arunoda,

as explained in tutorial the branch markdown-blog doesn't have files like highlights.js etc.. please see and fix it ASAP... great job thanks :)

On section 8, after cloning, checking out the clean-urls-ssr-markdown branch, npm install and npm run dev I get an error.

events.js:163
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE :::3000
    at Object.exports._errnoException (util.js:1034:11)
    at exports._exceptionWithHostPort (util.js:1057:20)
    at Server._listen2 (net.js:1265:14)
    at listen (net.js:1301:10)
    at Server.listen (net.js:1392:7)
    at Function.listen (/Users/gustav/code/learnnextjs-demo/node_modules/express/lib/application.js:618:24)
    at app.prepare.then (/Users/gustav/code/learnnextjs-demo/server.js:22:10)
    at process._tickCallback (internal/process/next_tick.js:109:7)

npm ERR! Darwin 16.4.0
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
npm ERR! node v7.8.0
npm ERR! npm  v4.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `node server.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script 'node server.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the hello-next package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs hello-next
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls hello-next
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/gustav/.npm/_logs/2017-05-01T11_37_52_468Z-debug.log

Here's the log file:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'dev' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'predev', 'dev', 'postdev' ]
5 info lifecycle [email protected]~predev: [email protected]
6 silly lifecycle [email protected]~predev: no script for predev, continuing
7 info lifecycle [email protected]~dev: [email protected]
8 verbose lifecycle [email protected]~dev: unsafe-perm in lifecycle true
9 verbose lifecycle [email protected]~dev: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/Users/gustav/code/learnnextjs-demo/node_modules/.bin:/Users/gustav/.rvm/gems/ruby-2.0.0-p247/bin:/Users/gustav/.rvm/gems/ruby-2.0.0-p247@global/bin:/Users/gustav/.rvm/rubies/ruby-2.0.0-p247/bin:/Users/gustav/.rvm/bin:/bin:/sbin:/usr/bin:/usr/local/sbin:/usr/local/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/opt/ImageMagick/bin:/usr/local/MacGPG2/bin
10 verbose lifecycle [email protected]~dev: CWD: /Users/gustav/code/learnnextjs-demo
11 silly lifecycle [email protected]~dev: Args: [ '-c', 'node server.js' ]
12 silly lifecycle [email protected]~dev: Returned: code: 1  signal: null
13 info lifecycle [email protected]~dev: Failed to exec dev script
14 verbose stack Error: [email protected] dev: `node server.js`
14 verbose stack Exit status 1
14 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:279:16)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at EventEmitter.emit (events.js:194:7)
14 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:40:14)
14 verbose stack     at emitTwo (events.js:106:13)
14 verbose stack     at ChildProcess.emit (events.js:194:7)
14 verbose stack     at maybeClose (internal/child_process.js:899:16)
14 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:226:5)
15 verbose pkgid [email protected]
16 verbose cwd /Users/gustav/code/learnnextjs-demo
17 error Darwin 16.4.0
18 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "dev"
19 error node v7.8.0
20 error npm  v4.2.0
21 error code ELIFECYCLE
22 error errno 1
23 error [email protected] dev: `node server.js`
23 error Exit status 1
24 error Failed at the [email protected] dev script 'node server.js'.
24 error Make sure you have the latest version of node.js and npm installed.
24 error If you do, this is most likely a problem with the hello-next package,
24 error not with npm itself.
24 error Tell the author that this fails on your system:
24 error     node server.js
24 error You can get information on how to open an issue for this project with:
24 error     npm bugs hello-next
24 error Or if that isn't available, you can get their info via:
24 error     npm owner ls hello-next
24 error There is likely additional logging output above.
25 verbose exit [ 1, true ]

Hi,
I'm new to react (coming from angular side), and totally new to SSR concept.

As per you code below,

import Layout from '../components/Layout.js'
import fetch from 'isomorphic-unfetch'

const Post =  (props) => (
    <Layout>
       <h1>{props.show.name}</h1>
       <p>{props.show.summary.replace(/<[/]?p>/g, '')}</p>
       <img src={props.show.image.medium}/>
    </Layout>
)

Post.getInitialProps = async function (context) {
  const { id } = context.query
  const res = await fetch(`https://api.tvmaze.com/shows/${id}`)
  const show = await res.json()

  console.log(`Fetched show: ${show.name}`)

  return { show }
}

export default Post

This is running fine on client side, but while running on server side (reload detail page), it throws below error.

It seems like page gets rendered before data from API is available.
What would be the best way to handle such a situations?
Is it like showing or returning 'Loading' message or loading component till data gets available? If yes then mostly in all cases where we fetch data using API call which takes some time, it will always return rendered component with 'Loading' only.

i just cloned the project switched to "getting-started" branch.
when I tried installing node modules

Hi! I'm missing a component, not sure if I should create it myself or if it should be part of this repo by default.

Tutorial URL: https://learnnextjs.com/basics/create-dynamic-pages/adding-a-list-of-posts

Tutorial Step: Adding a list of posts

Problem: Requested to import a missing component
import Layout from '../components/MyLayout.js'

No /components/MyLayout.js is included by default.

Is this expected?

Thank you!

I runned the app of this lesson (I'm rendering on Vivaldi browser) and when I checked the answer "/post?title=Hello Next.js", it's show that I'm wrong, but the URL on the browser show me this value.
I repeat the test on Google Chrome browser and the URL show me "post?title=Hello%20Next.js".

I think the both of this answers may be correct.