When I run "npm run dev",I get the following error,It seems that the node version is too old??but my os is win7,so i set up node v13.14.0 which is the last version can be set up on win7,so how can i deal with it, Any tips are appreciated! :

D:\nextjs\nextjs-blog\node_modules\next\dist\cli\next-dev.js:260
showAll: args["--show-all"] ?? false,
^

SyntaxError: Unexpected token '?'
at Object.compileFunction (vm.js:344:18)
at wrapSafe (internal/modules/cjs/loader.js:1048:15)
at Module._compile (internal/modules/cjs/loader.js:1082:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1138:10)
at Module.load (internal/modules/cjs/loader.js:982:32)
at Function.Module._load (internal/modules/cjs/loader.js:875:14)
at Module.require (internal/modules/cjs/loader.js:1022:19)
at require (internal/modules/cjs/helpers.js:72:18)
at Object.dev (D:\nextjs\nextjs-blog\node_modules\next\dist\lib\commands.js:15:30)
at Object. (D:\nextjs\nextjs-blog\node_modules\next\dist\bin\next:150:28)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ dev: next dev
npm ERR! Exit status 1

It looks like there's a step missing for the lesson Assets, Metadata, and CSS > Download Your Profile Picture. You say:

Create an images directory inside of the public directory

But there's no public folder yet 🤔

Perhaps add the step:

• Stop the development server, then run npm run build to generate the public folder.

The whole thing would look like this:

• Download your profile picture from GitHub, Twitter, LinkedIn or elsewhere (or use this file).
• Stop the development server, then run npm run build to generate the public folder.
• Create an images directory inside of the public directory.
• Save the picture as profile.jpg in the public/images directory.
• The image size can be around 400px by 400px.
• You may remove the unused SVG logo file directly under the public directory.

I get an error when running npm dev run. I have posted the image of what it is saying instead of typing it out. I follow the instructions per the NEXT.js website. What do I need to do to fix this error?

run this demo(blog) , happen a error of date.js:Server error,rangerERROR:Invalid time value
tip format() fucntion (No.6 line)
it not date error , that function post(postData) of [id].js file sent a undifine(null) data var!
wrong is [id].js getStaticProps() function:
return{
props:{ //{} is Multiple packing
postData
}
}
solution is:
1.delete {} of "postData",right is :
return{
props:postData
}
2. modify var of "postData" object in Post function:
postData.title ==> postData.postData.title
postData.date ==> postData.postData.date //not "Invalid time value " error
postData.contentHtml ==> postData.postData.contentHtml

demo is nice !!

Hey,

I was just trying to follow a guide for dynamic routing but I get errors when running: npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/dynamic-routes-starter"

This is my error log:

Creating a new Next.js app in /Users/<User>/Code/Learning/nextjs-blog.

Downloading files from repo https://github.com/vercel/next-learn-starter/tree/master/dynamic-routes-starter. This might take a moment.

Installing packages. This might take a couple of minutes.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"16.13.1" from the root project
npm ERR!   peer react@"^16.6.0 || ^17" from [email protected]
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.0" from the root project
npm ERR!   3 more (react-dom, @next/react-dev-overlay, styled-jsx)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^17.0.0" from [email protected]
npm ERR! node_modules/next/node_modules/use-subscription
npm ERR!   use-subscription@"1.5.0" from [email protected]
npm ERR!   node_modules/next
npm ERR!     next@"^10.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.````

These are my installed versions of npm, npx and node:

> npm -v
7.0.8

> npx -v
7.0.8

> node -v
v15.1.0

Hi I'm just wondering if this ' ' is not the same as this . Because everytime I used this ' ' I get an error like from a link when i click the link I get 404 error. But when I change ' ' to it works fine. Are the different or is it a bug? Thanks

help

need to update here

https://www.nextjs.cn/learn/basics/create-nextjs-app/setup

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

to

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

what can I do ??

This line https://github.com/vercel/next-learn/blob/master/seo/pages/index.js#L103

Causes this failure

FetchError: request to https://restcountries.eu/rest/v2/all failed, reason: Hostname/IP does not match certificate's altnames: Host: restcountries.eu. is not in the cert's altnames: DNS:shortener.secureserver.net, DNS:www.shortener.secureserver.net
    at ClientRequest.<anonymous> (/Users/aharbick/Sites/seo/nextjs-lighthouse/node_modules/node-fetch/lib/index.js:1461:11)
    at ClientRequest.emit (node:events:376:20)
    at TLSSocket.socketErrorListener (node:_http_client:474:9)
    at TLSSocket.emit (node:events:376:20)
    at emitErrorNT (node:internal/streams/destroy:188:8)
    at emitErrorCloseNT (node:internal/streams/destroy:153:3)
    at processTicksAndRejections (node:internal/process/task_queues:80:21) {
  type: 'system',
  errno: 'ERR_TLS_CERT_ALTNAME_INVALID',
  code: 'ERR_TLS_CERT_ALTNAME_INVALID'
}

Sorry if this issue has already been reported and resolved. I did a search and could not find anything that matched this issue.

Steps to reproduce:

1. Create a new directory.
2. cd into the new directory.
3. Run the command npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter".
4. cd into nextjs-blog directory.
5. Run the command npm run dev.

Expected:
Dev server starts properly.
Actual:
TypeError: (0 , react_jsx_dev_runtime__WEBPACK_IMPORTED_MODULE_0__.jsxDEV) is not a function
at Home (webpack-internal:///./pages/index.js:19:92)
is displayed in terminal.

System information:
MacOS Catalina
Node v14.16.0

I have also tried deleting the node_modules and package-lock.json and running npm install again, but I still get the same error.

Can we add pagination with rolling window effect on home page of posts without page refresh (using AJAX or Fetch).

From this article, under the "Summary" section, there's a note:

Obviously it stated that you should add it (the className attribute) to the a tag, NOT to the <Link> tag. But the cited example clearly shows otherwise:

Shouldn't it be rephrased as: "add it to the Link tag, not to the a tag." ?

When building I'm getting the following error with latest packages and node v16.2.0 (npm v7.13.0)

TypeError: Class extends value undefined is not a constructor or null
at Object.618 (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:100)
at nccwpck_require (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11843)
at Object.270 (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:413)
at nccwpck_require (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11843)

at Object.327 (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:260)
at __nccwpck_require__ (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11843)
at Object.845 (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:3733)
at __nccwpck_require__ (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11843)
at /home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11971
at Object.<anonymous> (/home/mwoodpatrick/projects/git/www/nextjs-wp/node_modules/next/dist/compiled/postcss-scss/scss-syntax.js:1:11997)
at Module._compile (internal/modules/cjs/loader.js:1063:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
at Module.load (internal/modules/cjs/loader.js:928:32)
at Function.Module._load (internal/modules/cjs/loader.js:769:14)
at Module.require (internal/modules/cjs/loader.js:952:19)
at require (internal/modules/cjs/helpers.js:88:18)

After installing Typescript and converting the .js files to .tsx, a bunch of TypeScript errors appear in in the import statements of modules in VSCode. For example, in date.tsx:

Cannot find module 'date-fns' or its corresponding type declarations. ts(2307)

Error appears in VSCode, on M1 Mac. Using Yarn 3.

Hi. Thanks for the great tutorial 👏

1. Unused css file in starter code
There is globals.css file in /styles directory from the very first starter learn-starter, all the way through assets-metadata-css-starter.

However the only css file that is imported & used in those starters is styles/Home.module.css, not styles/globals.css.

Are there any reasons that the file (globals.css) is included in those starters despite the fact it is not used?🤔

2. Potentially misleading guide

In addition, Assets, Metadata, and CSS tutorial mentions the presence of styles directory (+ and unused /globals.css file).

Although the starter used in tutorial already have styles directory as mentioned, tutorial guides us to create styles directory.

And at this point I was confused, since I already got globals.css file but tutorial guides me to create global.css which seems like a typo! (considering similarity of the name for those 2 file)

After this Assets, Metadata, and CSS tutorial, the unused globals.css file is gone, and only global.css file (that is used in pages/_app.js) remains.

So, my point is...

• Is there any reason that unused globals.css exists?
• If not, it would be nice and clear if it's removed from starters, and also from tutorial.

I am getting this error when running the project using "npm dev run"

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
event - compiled client and server successfully in 1463 ms (154 modules)
wait - compiling / (client and server)...
event - compiled client and server successfully in 486 ms (235 modules)
error - uncaughtException: TypeError: t.unmask is not a function
at unmask (C:\Users\Username\nextjs-blog2\node_modules\next\dist\compiled\ws\index.js:1:1215)
at Receiver.getData (C:\Users\Username\nextjs-blog2\node_modules\next\dist\compiled\ws\index.js:1:17450)
at Receiver.startLoop (C:\Users\Username\nextjs-blog2\node_modules\next\dist\compiled\ws\index.js:1:14334)
at Receiver._write (C:\Users\Username\nextjs-blog2\node_modules\next\dist\compiled\ws\index.js:1:13674)
at writeOrBuffer (node:internal/streams/writable:392:12)
at _write (node:internal/streams/writable:333:10)
at Writable.write (node:internal/streams/writable:337:10)
at Socket.socketOnData (C:\Users\Username\nextjs-blog2\node_modules\next\dist\compiled\ws\index.js:1:44508)
at Socket.emit (node:events:513:28)
at addChunk (node:internal/streams/readable:324:12)

Not really sure if I did anything wrong. It doesn't seem to affect much, but seeing that error in the console is annoying.

The provided wrapping of CodeSampleModal in Dynamic Imports for Components contains a syntax error (erroneous semicolon) when used.

{
  isModalOpen && (
    <CodeSampleModal
      isOpen={isModalOpen}
      closeModal={() => setIsModalOpen(false)}
    />
  );
}

 $ npm run build && npm run start

> build
> next build

Browserslist: caniuse-lite is outdated. Please run:
  npx browserslist@latest --update-db
  Why you should do it regularly: https://github.com/browserslist/browserslist#browsers-data-updating
info  - Checking validity of types  
warn  - No ESLint configuration detected. Run next lint to begin setup
Browserslist: caniuse-lite is outdated. Please run:
npx browserslist@latest --update-db

Why you should do it regularly:
https://github.com/browserslist/browserslist#browsers-data-updating
info  - Creating an optimized production build  
Failed to compile.

./pages/index.js
Error: error: Expected '}', got ';'
  
   |
89 |             );
   |              ^

Caused by:
    0: failed to process js file
    1: Syntax Error


> Build failed because of webpack errors

Removing the semicolon allows the build to complete correctly.

It says to report this, so I'm doing so:

Downloading files from repo https://github.com/vercel/next-learn/tree/master/basics/learn-starter. This might take a moment.

? Could not download "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" because of a connectivity issue between your machine and GitHub.
✔ Could not download "https://github.com/vercel/next-learn/tree/master/basics/learn-starter" because of a connectivity issue between your machine and GitHub.
Do you want to use the default template instead? … no

Aborting installation.
Unexpected error. Please report it as a bug:
 DownloadError: Premature close
    at createApp (/Users/pz/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:317:17028)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async run (/Users/pz/.npm/_npx/efeac22998af9bf2/node_modules/create-next-app/dist/index.js:317:23064)

➜  Projects npm -v                                                                                                                     
8.13.2
➜  Projects node -v
v18.6.0

I'm too new at NextJS to know what's happening here and what to do to fix it. Today's my only day to really sit down with this, so hopefully the default template route will assist.

Great tutorial !! built with basic features but following best practice.

In the https://nextjs.org/learn/basics/data-fetching/implement-getstaticprops, it says :

Once this is set up, the allPostsData prop will be passed to the Home component. To see this, modify the component definition to take { allPostsData }:

Looks like Next pass the props to the default component, but Is there a way to access the props from other functions other than passing around the props or define another cosnt?

Here is my intension :

import Head from "next/head";
import Layout, { siteTitle } from "../components/layout";
import utilStyles from "../styles/utils.module.css";
import { getSortedPostsData } from "../lib/posts";

export async function getStaticProps() {
  const allPostsData = getSortedPostsData();
  return {
    props: {
      allPostsData,
    },
  };
}

const showPosts = (allPostsData) => {
  return (
    <section className={`${utilStyles.headingMd} ${utilStyles.padding1px}`}>
      <h2 className={utilStyles.headingLg}>Blog</h2>
      <ul className={utilStyles.list}>
        {allPostsData.map(({ id, date, title }) => (
          <li className={utilStyles.listItem} key={id}>
            {title}
            <br />
            {id}
            <br />
            {date}
          </li>
        ))}
      </ul>
    </section>
  );
};

export default function Home({ allPostsData }) {
  return (
    <Layout home>
      <Head>
        <title>{siteTitle}</title>
      </Head>
      <section className={utilStyles.headingMd}>
        <p>[Your Self Introduction]</p>
        <p>
          (This is a sample website - you’ll be building a site like this on{" "}
          <a href="https://nextjs.org/learn">our Next.js tutorial</a>.)
        </p>
      </section>
      {showPosts(allPostsData)}
    </Layout>
  );
}

I just tries to go through the section on converting this app to Typescript and can't read through this error when trying to run the dev server? I went through all of the files that I changed a couple of times but still don't see what the problem is?

error - ./pages/_app.ts
NonErrorEmittedError: (Emitted value instead of an instance of Error) 
  x Expected '>', got '{'
   ,-[/home/rick/tmp/nextjs-blog/pages/_app.ts:5:3]
 5 | return <Component {...pageProps} />
   :                   ^
   `----

Caused by:
    0: failed to process js file
    1: failed to process input file
    2: Syntax Error

Congratulations on the tutorial, very good!

I noticed that I was seeing something different on the screen than I should, e.g.: https://nextjs.org/static/images/learn/dynamic-routes/links.png

I found that globals.css are different: https://github.com/vercel/next-learn/blob/master/basics/api-routes-starter/styles/global.css (looks good to me, same results), and https://github.com/vercel/next-learn/blob/master/basics/learn-starter/styles/globals.css (initialized on https://nextjs.org/learn/basics/create-nextjs-app/setup by "Create a Next.js app")

I am following the "Create your first app" tutorials in the order suggested

The setup says for Assets, Metadata, and CSS

If you’re continuing from the previous lesson, you can skip this page. Click the button below to go to the next page.

but when you get to step 6 it says

As you can see, our index page (http://localhost:3000/) already has some styles. If you look at your file structure, you'll see a folder called styles with two CSS files: a global stylesheet (globals.css), and a CSS module (Home.module.css).

However

• there doesn't appear to be such file in that location
• CSS for pages/index.js is internal

$ tree . --gitignore
.
├── README.md
├── package-lock.json
├── package.json
├── pages
│   ├── index.js
│   └── posts
│       └── first-post.js
└── public
    ├── favicon.ico
    └── images
        └── profile.jpg

4 directories, 7 files

The only notable deviation I have made is when starting my project originally today I used @lgaspari's version (identical to the current repo but with the current dependency issue fixed)

npx create-next-app nextjs-example --use-npm --example "https://github.com/lgaspari/next-learn/tree/master/basics/learn-starter"

If you use /assets-metadata-css-starter instead of following along from /learn-starter you have the right files

 tree . --gitignore 
.
├── README.md
├── package-lock.json
├── package.json
├── pages
│   ├── index.js
│   └── posts
│       └── first-post.js
├── public
│   ├── favicon.ico
│   └── vercel.svg
└── styles
    ├── Home.module.css
    └── globals.css

4 directories, 9 files

after working through the tutorial when I arrived to
https://nextjs.org/learn/basics/assets-metadata-css/polishing-layout
when I run it I got the following error
Error: Invalid <Link> with <a> child. Please remove <a> or use <Link legacyBehavior>. Learn more: https://nextjs.org/docs/messages/invalid-new-link-with-extra-anchor
the code for the layout has 3 places that have Link and a tag under them. I resolved it by deleting the a tag. There is another way from next docs to add legacyBehavior to the Link and give the a tag the id called link

In step 3 of tutorial: https://nextjs.org/learn/basics/data-fetching/pre-rendering
there is example of not pre-rendered website:
Enable JavaScript in your browser and check out this page. This is a plain React.js app built with Create React App.,
but this website is already prerendered (same result as for https://next-learn-starter.now.sh/)

I just finished the Next.js basic course. Now I am trying to figure out, how to start with jest for testing. I followed his instructions

With the code from your starter tutorial I got this error. After some research it seems I have to mock remark because jest doesn't support ESM really good.

All of this is new for me, so I like to ask if mocking remark is the right direction to go? It would be great to have a tutorial how to implement tests after finishing the tutorial.

SyntaxError: Cannot use import statement outside a module

      2 | import path from 'path';
      3 | import matter from 'gray-matter';
    > 4 | import { remark } from 'remark';
    
    ```

I created a typescript version of the cms-wordpress using command:

npx create-next-app --typescript --example cms-wordpress nextjs-wp-typescript

I was somewhat surprised that it did not appear to create typescript versions of the standard files is it expected to?

I followed the docs in:

https://nextjs.org/docs/basic-features/typescript
https://nextjs.org/learn/excel/typescript/nextjs-types

But when I created date.tsx using the description in:

https://github.com/vercel/next-learn-starter/blob/master/typescript-final/components/date.tsx

but on rebuild I got the error:

./components/date.tsx:1:1
Type error: 'date.tsx' cannot be compiled under '--isolatedModules' because it is considered a global script file. Add an import, export, or an empty 'export {}' statement to make it a module.

Also looking at:

https://github.com/vercel/next-learn-starter/blob/master/typescript-final/components/layout.tsx

it does not seem like the signature of this component matches the javascript version that was generated is it correct?

Any pointers on the best way to create a typescript version of the cms-wordpress example would be much appreciated

learn-starter has next version set to latest, with a React version of 17 defined. This causes errors when next expects at least version 18.2.0. These dependencies should be updated.

Unhandled Runtime Error

Error: No router instance found.
You should only use "next/router" inside the client side of your app.

Server Error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Honestly I'm so confused and frustrated about not being able to run anything locally. I want to learn to use next.js, but I can't see to start with it.

Hello. I'm trying to run the server on this repo following the NextJs guide but I noticed that the API endpoint used to get country data is not working.

• old one: https://restcountries.eu/rest/v2/all (not working)
• new one: https://restcountries.com/v2/all

Here are the lines where it's wrongly referenced:

• next-learn/seo/pages/index.js

  Line 103 in 4929e5a

  const response = await fetch('https://restcountries.eu/rest/v2/all');

• next-learn/seo/demo/pages/index.js

  Line 116 in 4929e5a

  const response = await fetch("https://restcountries.eu/rest/v2/all")

Trying to follow the tutorial here:

https://nextjs.org/learn/basics/create-nextjs-app/setup

I can't get past the first step "Create a Next.js app".

Tried running the following command:
npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter"

I get the following error:
Could not locate the repository for "https://github.com/vercel/next-learn-starter/tree/master/learn-starter". Please check that the repository exists and try again.

After running

npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"

and cd into the nextjs-blog folder and running npm run dev I get the following error:

UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined
    at /Users/.../nextjs-blog/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:127:19
    at Object.<anonymous> (/Users/.../nextjs-blog/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1744:5)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (Users/.../nextjs-blog/node_modules/next/dist/compiled/react-server-dom-webpack/writer.browser.server.js:6:20)
(node:27686) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:27686) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Not supported
    at Object.loadConfig [as default] (/Users/.../nextjs-blog/node_modules/next/dist/server/config.js:70:78)

I am on Node v10.15.2

Error: https://prnt.sc/K2MT1kktDS4b


I found this error while I was working on my machine. Then I solved it. This also needs to be changed in the Next.js documentation and GitHub also so that no one else has the same problem/error.


Next.js doc: https://nextjs.org/learn/basics/dynamic-routes/implement-getstaticprops

Folder directory: next-learn/basics/dynamic-routes-step-1/pages/posts/[id].js


https://github.com/vercel/next-learn/blob/master/basics/dynamic-routes-step-1/pages/posts/%5Bid%5D.js


Line no 2:
import { getAllPostIds, getPostData } from '../../lib/posts'


Replace it with this line:
import getAllPostIds, { getPostData } from "../../lib/posts";


Thank you.

Run npm run dev

Then below error comeout

SyntaxError: Unexpected token '??=' at wrapSafe (internal/modules/cjs/loader.js:1001:16) at Module._compile (internal/modules/cjs/loader.js:1049:27) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) at Module.load (internal/modules/cjs/loader.js:950:32) at Function.Module._load (internal/modules/cjs/loader.js:790:12) at Module.require (internal/modules/cjs/loader.js:974:19) at require (internal/modules/cjs/helpers.js:101:18) at Object.<anonymous> (/Users/cutmeurahrudi/personal_project/nextjs/nextjs-blog/node_modules/next/dist/telemetry/post-payload.js:17:20) at Module._compile (internal/modules/cjs/loader.js:1085:14) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! [email protected] dev: next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] dev 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! /Users/cutmeurahrudi/.npm/_logs/2023-05-20T17_51_39_644Z-debug.log`

vercel/next.js#27758 (reply in thread)

When I follow the steps and complete getStaticProps part:

I got this error (I changed my real username to "username" in the path below):

Error: ENOENT: no such file or directory, scandir '/Users/username/Desktop/nextjs-blog/posts'

the path is correct and there are two markdown files under the top-level posts directory, but it still got the error

Error: Must use import to load ES Module: C:\dev\devProjects\next projects\blog-site\nextjs-blog\node_modules\remark\index.js
require() of ES modules is not supported.

next.js is very good

Not sure if this is the right place to ask it but I saw the example here so why not,

So I'm learning next rn and I facing a issue where I cant display the images from the .md file I have

I was following through the guide and then I wanted to do something else as well ( The SSG blog Guide )
I saw they way they were able to display all the blogs in the certain folder using

{allPostsData.map(({ id, title }) => (
            <li className="{utilStyles.listItem}" key={id}>
                  <a href={`projects/${id}`}>{title}</a>
            </li>
            ))}

But I want to do the same for the blog its self but instead for images
work.md

---
title: work_2 test 2021
Projects:
  - type: Image
    photo: assets/images/cv.png
  - photo: assets/images/e1hjoxfxsaayvjh.jpg
---

https://pastebin.com/raw/CPGjCKbY and this is what I came up with but it gives me a error saying postData.map is not a function
can anyone help me with this

Oh also I'm using netlifycms to generate these .md if that helps.

I'm getting a heap limit error when attempting to build this project. This is on an M1 macOS laptop with 64GB of memory.

$ yarn -v
> 1.22.19
$ node -v
> v18.16.0
$ npx create-next-app@latest nextjs-blog-2 --use-yarn --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
$ yarn build

Yields this dump:

yarn run v1.22.19
$ next build
- info Linting and checking validity of types ...- warn The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
- info Linting and checking validity of types ..
<--- Last few GCs --->

[22365:0x140040000]    29725 ms: Mark-sweep 4044.7 (4133.4) -> 4037.0 (4143.0) MB, 576.9 / 0.1 ms  (average mu = 0.787, current mu = 0.250) allocation failure; scavenge might not succeed
[22365:0x140040000]    30985 ms: Mark-sweep 4053.1 (4143.0) -> 4044.9 (4149.7) MB, 1212.1 / 0.2 ms  (average mu = 0.477, current mu = 0.038) allocation failure; scavenge might not succeed


<--- JS stacktrace --->

FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory
 1: 0x1007894fc node::Abort() [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 2: 0x1007896ec node::ModifyCodeGenerationFromStrings(v8::Local<v8::Context>, v8::Local<v8::Value>, bool) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 3: 0x1008df0fc v8::internal::V8::FatalProcessOutOfMemory(v8::internal::Isolate*, char const*, bool) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 4: 0x100a8a088 v8::internal::EmbedderStackStateScope::EmbedderStackStateScope(v8::internal::Heap*, v8::internal::EmbedderStackStateScope::Origin, cppgc::EmbedderStackState) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 5: 0x100a88b6c v8::internal::Heap::CollectGarbage(v8::internal::AllocationSpace, v8::internal::GarbageCollectionReason, v8::GCCallbackFlags) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 6: 0x100a7ce14 v8::internal::HeapAllocator::AllocateRawWithLightRetrySlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/nod
 7: 0x100a7d644 v8::internal::HeapAllocator::AllocateRawWithRetryOrFailSlowPath(int, v8::internal::AllocationType, v8::internal::AllocationOrigin, v8::internal::AllocationAlignment) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/no
 8: 0x100a63478 v8::internal::Factory::NewFillerObject(int, v8::internal::AllocationAlignment, v8::internal::AllocationType, v8::internal::AllocationOrigin) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
 9: 0x100df32bc v8::internal::Runtime_AllocateInYoungGeneration(int, unsigned long*, v8::internal::Isolate*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
10: 0x10113d04c Builtins_CEntry_Return1_DontSaveFPRegs_ArgvOnStack_NoBuiltinExit [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
11: 0x1010ca2d0 Builtins_GrowFastSmiOrObjectElements [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
12: 0x10a8b0ca0
13: 0x10793b418
14: 0x105e63910
15: 0x106677d28
16: 0x10792a180
17: 0x105f38f50
18: 0x105e6f140
19: 0x107908f60
20: 0x10791cbb0
21: 0x105f3224c
22: 0x105e54724
23: 0x1066b73e0
24: 0x107925d0c
25: 0x105e4a934
26: 0x10c53b6e8
27: 0x105f17568
28: 0x105e62370
29: 0x10a8891a8
30: 0x105f2512c
31: 0x105d0dfd4
32: 0x10a8ca370
33: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
34: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
35: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
36: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
37: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
38: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
39: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
40: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
41: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
42: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
43: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
44: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
45: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
46: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
47: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
48: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
49: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
50: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
51: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
52: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
53: 0x1010c8198 Builtins_InterpreterEntryTrampoline [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
54: 0x1010f9ef4 Builtins_AsyncFunctionAwaitResolveClosure [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
55: 0x101188738 Builtins_PromiseFulfillReactionJob [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
56: 0x1010ebc4c Builtins_RunMicrotasks [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
57: 0x1010c63a4 Builtins_JSRunMicrotasksEntry [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
58: 0x100a0b82c v8::internal::(anonymous namespace)::Invoke(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
59: 0x100a0bd1c v8::internal::(anonymous namespace)::InvokeWithTryCatch(v8::internal::Isolate*, v8::internal::(anonymous namespace)::InvokeParams const&) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
60: 0x100a0bef8 v8::internal::Execution::TryRunMicrotasks(v8::internal::Isolate*, v8::internal::MicrotaskQueue*, v8::internal::MaybeHandle<v8::internal::Object>*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
61: 0x100a32644 v8::internal::MicrotaskQueue::RunMicrotasks(v8::internal::Isolate*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
62: 0x100a32edc v8::internal::MicrotaskQueue::PerformCheckpoint(v8::Isolate*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
63: 0x1006d8c50 node::InternalCallbackScope::Close() [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
64: 0x1006d87c4 node::InternalCallbackScope::~InternalCallbackScope() [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
65: 0x100784964 node::fs::FSReqPromise<node::AliasedBufferBase<double, v8::Float64Array, void>>::Resolve(v8::Local<v8::Value>) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
66: 0x10078fcd4 node::fs::AfterStringPtr(uv_fs_s*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
67: 0x100785330 node::MakeLibuvRequestCallback<uv_fs_s, void (*)(uv_fs_s*)>::Wrapper(uv_fs_s*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
68: 0x1010a5058 uv__work_done [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
69: 0x1010a8800 uv__async_io [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
70: 0x1010bafa4 uv__io_poll [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
71: 0x1010a8cd0 uv_run [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
72: 0x1006d96f4 node::SpinEventLoop(node::Environment*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
73: 0x1007c68ec node::NodeMainInstance::Run() [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
74: 0x100756028 node::LoadSnapshotDataAndRun(node::SnapshotData const**, node::InitializationResult const*) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
75: 0x1007562b4 node::Start(int, char**) [/Users/thomas.hunter/.nvm/versions/node/v18.16.0/bin/node]
76: 0x1abc0ff28 start [/usr/lib/dyld]

At step 8 of this link
https://nextjs.org/learn/basics/dynamic-routes/polishing-index-page
it asks to add the following line to index.js page

import Date from '../components/date'

but the date file is not provided. I got it from the code here but then I am getting the following error.

Module not found: Can't resolve 'date-fns' in '..\nextjs-blog\components'

What am I missing?

Hi,

tried npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
cd nextjs-blog
npm run dev

got:

`> @ dev /home/broosted/Documents/high-availability-mode-infra/UI/frontend-app

next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
(node:7832) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined
at /home/broosted/Documents/high-availability-mode-infra/UI/frontend-app/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:127:19
at Object. (/home/broosted/Documents/high-availability-mode-infra/UI/frontend-app/node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-writer.browser.development.server.js:1744:5)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object. (/home/broosted/Documents/high-availability-mode-infra/UI/frontend-app/node_modules/next/dist/compiled/react-server-dom-webpack/writer.browser.server.js:6:20)
(node:7832) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:7832) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
ReferenceError: TextEncoder is not defined
`

What's the issue ?

I used the Next.js tutorial as the foundation of my first Next blog. /lib/posts.js sorts posts in a way they are not always sorted.

How to reproduce this issue ?

I had this problem with this kind of dates: September 1st, 2nd and 4th. It displayed as such:

• Post about pets - September 2nd, 2020
• Post about tomatoes - September 1st, 2020
• Post about space - September 4th, 2020

You can reproduce it by playing with my code just before and after this commit.

Where is the issue ?

https://github.com/vercel/next-learn-starter/blob/d90855ed3f6b6366d3834536f19b5b9cb8de26f3/basics-final/lib/posts.js#L30-L36

What is the fix ?

return allPostsData.sort((a, b) => { 
  return new Date(b.date) - new Date(a.date);
 }) 

A PR is on its way. I hope it can help out other beginners like me. By the way, awesome tutorial, so clear and easy to understand!

On https://next-learn-starter.now.sh/ following CSS files are duplicated:

https://next-learn-starter.now.sh/_next/static/css/dcff670ee14b1f15bf73.css &
https://next-learn-starter.now.sh/_next/static/css/11680bc78302d5568daa.css

In this part of the tutorial it is said that we should see those two changes: the First Post page with some margin on it and the automatically generated unique class name.

But if you're running the dev npm script those changes will not be visible. Just when you build and run the npm start script you'll see them. Tested on Arch Linux with both the Vivaldi Browser 4.1.2369.16 Stable Build and Firefox 91.0.2 Stable.

I keep running into a "Could not locate the repository" error when following the instructions at https://nextjs.org/learn/basics/create-nextjs-app/setup

npx: installed 1 in 2.349s
Could not locate the repository for "https://github.com/vercel/next-learn/tree/master/basics/learn-starter". Please check that the repository exists and try again.

Instructions say to check https://github.com/vercel/next-learn/blob/master/basics/errors/install.md but there's not much detail there and the commands are a bit different. I followed the text based instructions there (not the specific command) and removed everything past the project name which was then "Successful" but when starting the app it quickly failed for other reasons:

Installing dependencies:
- react
- react-dom
- next

+ [email protected]
+ [email protected]
+ [email protected]
added 243 packages from 223 contributors and audited 255 packages in 44.584s
found 0 vulnerabilities


Installing devDependencies:
- eslint
- eslint-config-next


> [email protected] postinstall C:\code\nextjs-blog\node_modules\core-js-pure
> node -e "try{require('./postinstall')}catch(e){}"

+ [email protected]
+ [email protected]
added 170 packages from 100 contributors and audited 425 packages in 34.247s
found 0 vulnerabilities


Initialized a git repository.

Success! Created nextjs-blog at C:\code\nextjs-blog

 started server on 0.0.0.0:3000, url: http://localhost:3000
(node:19500) UnhandledPromiseRejectionWarning: ReferenceError: TextEncoder is not defined
    at C:\code\nextjs-blog\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-writer.browser.development.server.js:67:19
    at Object.<anonymous> (C:\code\nextjs-blog\node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-writer.browser.development.server.js:900:5)
    at Module._compile (internal/modules/cjs/loader.js:689:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)
    at Module.require (internal/modules/cjs/loader.js:637:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (C:\code\nextjs-blog\node_modules\next\dist\compiled\react-server-dom-webpack\writer.browser.server.js:6:20)
(node:19500) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:19500) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error
Error: Not supported
    at Object.loadConfig [as default] (C:\code\nextjs-blog\node_modules\next\dist\server\config.js:399:74)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! nextjs-blog@ dev: `next dev`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the nextjs-blog@ dev 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:

There is a spelling mistake inside the code for Alert.js component.
Please refer to the URL and image below.

Page URL: https://nextjs.org/learn/basics/assets-metadata-css/styling-tips

Image for reference:

I will raise a PR for this if you direct me as to where is the actual code for the website.

The https://nextjs.org/learn/basics/create-nextjs-app/setup page says:

If you don’t have Node.js installed, install it from here. You’ll need Node.js version 10.13 or later.

But the docs https://nextjs.org/docs/upgrading#v13-summary say:

The minimum Node.js version has been bumped from 12.22.0 to 14.6.0, since 12.x has reached end-of-life.

I think this need to be documented. It saved my day. Without this really difficult to have virtual links.

I've solved the issue with a workaround, simply use query params without a custom server integration, just like below:

Workaround

Router.replace(`/path-to-route?param=${param}&param2=${param2}`, `/path-to-route/${param}/${param2}`, { shallow: true })

And then in the page wrap the component with withRouter

import { withRouter } from 'next/router';

class YourAwesomeComponent extends React.Component {
	render () {
		const { query } = this.props.router
		return <h1> {query.param} {query.param2} </h1>
	}
}

export default withRouter(YourAwesomeComponent)

Question

In my case the usage of a custom route on server.js was unuseful, but what if I need to do custom stuff in my custom route?

Originally posted by @rawnly in vercel/next.js#5922 (comment)

I followed the official documentation for setting up next.js project.
Project command:
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
npm run dev gave the following error:

 aditya@acer:~/Dev/nextjs-blog$ npm run dev

> dev
> next dev

/home/aditya/Dev/nextjs-blog/node_modules/next/dist/cli/next-dev.js:316
            showAll: args["--show-all"] ?? false,
                                         ^

SyntaxError: Unexpected token '?'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.dev (/home/aditya/Dev/nextjs-blog/node_modules/next/dist/lib/commands.js:10:30)
    at Object.<anonymous> (/home/aditya/Dev/nextjs-blog/node_modules/next/dist/bin/next:141:28)
    at Module._compile (internal/modules/cjs/loader.js:999:30)