vercel / next-learn Goto Github PK
View Code? Open in Web Editor NEWLearn Next.js Starter Code
Home Page: https://next-learn-dashboard.vercel.sh/
License: MIT License
Learn Next.js Starter Code
Home Page: https://next-learn-dashboard.vercel.sh/
License: MIT License
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
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?
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.
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
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.
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.
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...
globals.css
exists?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")
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
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 !!
help
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
next.js is very good
I've solved the issue with a workaround, simply use query params without a custom server integration, just like below:
Router.replace(`/path-to-route?param=${param}¶m2=${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)
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)
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 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
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.
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
I will raise a PR for this if you direct me as to where is the actual code for the website.
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:
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.
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:
You can reproduce it by playing with my code just before and after this commit.
Where is the issue ?
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!
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
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.
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.
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 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)
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 thepublic
directory
But there's no public
folder yet 🤔
Perhaps add the step:
npm run build
to generate the public
folder.The whole thing would look like this:
npm run build
to generate the public
folder.images
directory inside of the public
directory.profile.jpg
in the public/images directory
.public
directory.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)
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 ??
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
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`
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:
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.
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.
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>
);
}
Can we add pagination with rolling window effect on home page of posts without page refresh (using AJAX or Fetch).
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]
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
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
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.
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.
Here are the lines where it's wrongly referenced:
Line 103 in 4929e5a
next-learn/seo/demo/pages/index.js
Line 116 in 4929e5a
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
`
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:
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.
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'
}
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.
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.
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 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.