Link
ãŸãã¯Router
ã¯ãã¯ã©ã€ã¢ã³ãåŽã®ã«ãŒãã£ã³ã°ãå®è¡ãããšæ©èœããªããªããŸãã HMRãããŒãžéã®é·ç§»ãäžæããŠããããã§ãã ããã¯ãã¢ããªãã¢ã€ãã«ç¶æ
ãŸãã¯ããã¯ã°ã©ãŠã³ãã§å°ãã®éæŸçœ®ãããŠããå Žåã«æãé »ç¹ã«çºçããŸãïŒãã ããã¢ã€ãã«ç¶æ
ã«ãªããã«ã¯ãªãã¯ããŠãããšãã«çºçããããšãçµéšããŸããïŒ
åäœãåçŸããæé ã¯ãã³ãŒãã¹ãããããŸãã¯ãªããžããªãæäŸããŠãã ããã
npm install
npm run dev
åã ã®ããŒãžãã¹ãŠã«ã¢ã¯ã»ã¹ã§ããããšãæåŸ ããŠããŸã
ããŒãžã¯ç¹å®ã®ã«ãŒãã«ç§»åããŸããã ããŒãžãæŽæ°ãããšä¿®æ£ãããŸã
ãaboutããªã³ã¯ãšãcontactããªã³ã¯ã®äž¡æ¹ãæ©èœããŸããïŒåã«ãŒãã®æåã®è©Šè¡ã§HMRãã°ã«æ³šæããŠãã ããïŒã ããŒãžã®æŽæ°åŸãæåŸ ã©ããã«æ©èœããŸãã ã¢ããªãçŽ2åéã¢ã€ãã«ç¶æ ã®ãŸãŸã«ãããšãåé¡ãçºçããŠæåããããçŽããŸãã
ã³ã³ãœãŒã«ãéããšãã«ãŒã¿ãŒã€ãã³ãrouteChangeStart
çºçããŸããã routeChangeComplete
ã¯çºçããŸããã
ç§ã¯åãåé¡ãæ±ããŠããŸã
ããã¯å®çšŒåç°å¢ã§ãèŠãããã®ã§ãHMRããã®åé¡ã®å¯äžã®è²¬ä»»è ã§ãããã©ããã¯ããããŸãã
@ernerockäžèšã®äŸãããã«å±éã
@malimccallaç§ã®åé¡ã¯ããªãã®åé¡ãšã¯ç°ãªãããã§ãããããã²ãŒã·ã§ã³ã®åäœã¯åãã§ãã ããã²ãŒãããããŒãžã«cssã€ã³ããŒããããå Žå
import 'react-alice-carousel/lib/alice-carousel.css';
ããã²ãŒã·ã§ã³ã®åäœã¯ãå ±åãããã®ãšåãã§ãã '@ zeit / next-css'ã®åé¡ã®ããã§ã
ïŒ5291ã§ãã§ã«å ±åãããŠããããã§ããã_app.jsã«cssãã¡ã€ã«ãã€ã³ããŒãããŠç©ºã«ããããšã§äžæçã«ã解決ãã§ããŸã
@ernerockéåžžã«å¥åŠãªããšã«ããããã¯äœããã®åãéã§é¢é£ããŠããå¯èœæ§ããããŸãïŒ
ããã§ãåãåé¡ããããŸããããŒãžã/ homeããã³/ home / subpageãšããŠèšå®ããŠããŸãããRouter.pushãRouter HOCããŸãã¯Linkã䜿çšããŠ/ homeãã/ home / subpageã«ç§»åããããšãããšãæ©èœããŸããã
ããŠãããå°ãæ å ±ããããŸãã/homeã®ååã/ home / welcomeã«å€æŽããããšããŸããããäžèšã®ã±ãŒã¹ã¯ãŸã æ©èœããŸããã
@ maciej-kaãããããã§ãã push
ã§ãçºçããããšã確èªã§ããŸãã Link
ã ãã§
@timneutkens @ããªãã«ç³ãèš³ãããŸããããä»ã«ã
ãªã³ããã³ããšã³ããªãšãã®å»æ£ã«é¢é£ããŠããå¯èœæ§ãæãé«ãã§ã
å°ãæãäžããŸããããããŒãžãç Žæ£ãããããšãåå ã®ããã§ãã ãã®ãã°ã衚瀺ããããšããã«ãç Žæ£ãããããŒãžã«ç§»åã§ããªããªããŸã
> Disposing inactive page(s): /
ä»å€ã¯ããå°ãæ·±ãæãäžããæéããããPRãéããŠä¿®æ£ã§ããããšãé¡ã£ãŠããŸãã @timneutkensæåã®æŽå¯ã«æè¬ããŸããç¹ã«æ³šç®ãã¹ããã¡ã€ã«ã®éšåããããšæãããå Žåã¯ããç¥ãããã ããã
ç§ã¯ãããä¿®æ£ããããšè©Šã¿ãŸããããé¢é£ãã¡ã€ã«ã§å€ãã®ããšãèµ·ãã£ãŠãããæ®å¿µãªããç§ã¯ããã®åºã«å®å
šã«å°éããããšãã§ããŸããã§ããã ãã®åé¡ãæ±ããŠããä»ã®äººã®ããã«ãçŸåšã®åé¿çãšããŠã next.config.js
ãã®æ§æã䜿çšããŠãããŒãžãç Žæ£ããããŸã§ã®æéã延é·ããŠããŸãã
onDemandEntries: {
// period (in ms) where the server will keep pages in the buffer
maxInactiveAge: 25 * 1000,
// number of pages that should be kept simultaneously without being disposed
pagesBufferLength: 5,
},
ç§ã«ããã®åé¡ããããŸãã
誰ããããã調ã¹ãŠããŸããïŒ ç§ããã®åé¡ãæ±ããŠããŸãããå¿ ããããã¹ãŠã®ã«ãŒãã«åé¡ãããããã§ã¯ãããŸããã ã©ã®ã«ãŒããå¿çããªããªããã¯ã©ã³ãã ã§ãããæçµçã«ã¯ãã¹ãŠå¿çããªããªããŸãã
next-server / lambdasã®åé¡ã«çŠç¹ãåãããŠãããããçŸæç¹ã§ã¯èª¿æ»ã§ããŸãããããªã³ããã³ããšã³ããªã«é¢é£ããŠããå¯èœæ§ããããŸãã
ããã確ãã«ããã ã åŠååŸã«èµ·ãããŸãã
ç§ãšåãã
ãããæ¬çªç°å¢ã®åé¡ã§ã¯ãªãããšã誰ãã確èªã§ããŸããïŒ
ãããæ¬çªç°å¢ã®åé¡ã§ã¯ãªãããšã誰ãã確èªã§ããŸããïŒ
ãããã¯ã·ã§ã³ã¢ãŒãã§ã¯åé¡ãããŸãããENVããããã¯ã·ã§ã³ã«å€æŽããåŸã¯ããã¹ãŠåé¡ãããŸããã
ç§ã¯ãããéçºãšæ¬çªã®äž¡æ¹ã§æã£ãŠããŸãã ããŒãžãéã¢ã¯ãã£ãã§ãããã©ãããªã©ã¯é¢ä¿ãããŸãããæ°ããããŒããå®è¡ã§ããŸãããæ©èœããŸããã éçºã§ã¯ããµãŒããŒã³ã³ãœãŒã«> Building page: /contact
WAIT Compling...
success client complied in 462ms
ãã ããããŒãžãã¯ã©ã€ã¢ã³ãã§ã¬ã³ããªã³ã°ãããããšã¯ãããŸããã åæã«ãã¯ã©ã€ã¢ã³ãã³ã³ãœãŒã«ã§ïŒ
[HMR] bundle rebuilding
ã¡ãã»ãŒãžã®å ŽåããµãŒããŒã³ã³ãœãŒã«ã¯æ¬¡ã®ããã«è¡šç€ºããŸãã
Disposing of inactive page(s): /, /contact
ãã©ãŠã¶ã«mysite.com/contactãšå
¥åãããšãæ£åžžã«èªã¿èŸŒãŸããŸãã
maxInactiveAge
ãšpagesBufferLength
next.config.js
ã§åé¿çãè©ŠããŸãããã圹ã«ç«ã¡ãŸããã§ããã
[å€ãã®äººãèšã£ãŠããããã«ããããéçºäžã®ãã®ã§ããããšãæãã§ããŸãã]
ç·šéïŒç§ã¯ã³ã³ããŒãã³ãã«import 'node-mod/dist/theme.css
ãæã£ãŠããŸããã ãã®ã€ã³ããŒãã_app.js
ãã Link
ãæ©èœããŠããããšã確èªããŸããã
ããã§åãåé¡ãçºçããŸããç Žæ£åŸãéçºã¢ãŒãã§ã«ãŒããå®äºããŸããã æ¬åœã«è¿·æã§ãã
@roytsang ãåãåé¡ããšèšã代ããã«ãåé¡ã«ðã䜿çšããŸãã ããã¥ã¢ã«+1
ã¯ã䞊ã¹æ¿ãã®éã«èæ
®ãããããšã¯ãããŸããð
åãåé¡ããããŸãã _appã§Headfrom next / headã䜿çšããŠã¿ã€ãã«ãšãã¡ãã³ã³ãé©çšãå§ããŠãããä»æ¥ããå§ãŸããŸããã
@Atmospheres @malimccallaåé¿çãè©Šã
ç§ã¯ãŸã ããã«æ £ããŠããŸããããããã«è¡ããŸãã åé¡ããã€çºçãããã«ã€ããŠã®è©³çŽ°æ å ±ããä¿®æ£ãæ€èšããŠãã人ã«åœ¹ç«ã€ãããããªããšæã£ãã ãã§ãã
æŽæ°ïŒç§ã¯ä»æããã€ãã®ãã¹ããè¡ã£ãŠããŸããããããŠãããç§ãééãããã®ã§ãã
åé¡ã¯æšæ¥å§ãŸããŸãããç§ãå®è£ ããå¯äžã®æ°ããããšã¯æ¬¡ããã®é ã§ãã ã¹ã¿ã€ã«ã®èªã¿èŸŒã¿ã«äœ¿çšãããŠãã_documentã®headãHeadã«å€æŽããããšã«æ°ä»ããŸããã ãŸããHeadã_app.jsã«è¿œå ããŠãã¿ã€ãã«ãšãã¡ãã³ã³ãèšå®ããŸããã _app.jsã§Headãåé€ããŠããããã¯ä¿®æ£ãããŸããã§ããã _appãš_documentã®äž¡æ¹ã§Headãåé€ããŠããåé¡ã¯è§£æ±ºããŸããã§ããã æåŸã«ãã1ã€è©ŠããŠã¿ãŸãããã¿ã€ãã«ãšãã¡ãã³ã³ãèšå®ããããã«ã_documentã®Headãheadã«æ»ããHeadã_appã«æ®ããŸããããåé¡ã¯è§£æ±ºããŸããã
äœããã®çç±ã§åé¡ãåçºããå Žåã¯ãããã§å床æŽæ°ããŸãã ãã®æ å ±ãä¿®æ£ã«ã€ãªããããšãé¡ã£ãŠããŸãã
æŽæ°2ïŒåé¡ã¯è§£æ±ºããŸããããçºçããé »åºŠã¯äœããªããŸãã ãããçºçãããšããã®ããŒãžã®jsãããŒãããscriptã¿ã°ãè€è£œãããŠããããšã«æ°ã¥ããŸããã ããšãã°ãããŒãžãxããåããŠããŒããããšãè¿œå ãããŸã to the body. Now this script tag should only be added to the body once, but on the times it fails to load I see the script tag added a 2nd, and then if I click the link again it is added a 3rd time, and so on. These additional script tags are only added a few times while staying on the same page and clicking the link, however if I navigate to another page and back to where the link was, I can click it and add several more script tags.
Update 3: Problem happens after a while on a single link. Tested loading my home page and not clicking anything, after a couple minutes the Elements tab in Chrome dev tools flashes, I'm assuming a HMR, and ALL Links were broken. I hope all of this information wasn't just a waste of time for you guys. The issue doesn't seem to be happening in production, so I guess I'll just ignore it for the moment.
ç§ã¯ãŸã ããã«æ £ããŠããŸããããããã«è¡ããŸãã åé¡ããã€çºçãããã«ã€ããŠã®è©³çŽ°æ å ±ããä¿®æ£ãæ€èšããŠãã人ã«åœ¹ç«ã€ãããããªããšæã£ãã ãã§ãã
æŽæ°ïŒç§ã¯ä»æããã€ãã®ãã¹ããè¡ã£ãŠããŸããããããŠãããç§ãééãããã®ã§ãã
åé¡ã¯æšæ¥å§ãŸããŸãããç§ãå®è£ ããå¯äžã®æ°ããããšã¯æ¬¡ããã®é ã§ãã ã¹ã¿ã€ã«ã®èªã¿èŸŒã¿ã«äœ¿çšãããŠãã_documentã®headãHeadã«å€æŽããããšã«æ°ä»ããŸããã ãŸããHeadã_app.jsã«è¿œå ããŠãã¿ã€ãã«ãšãã¡ãã³ã³ãèšå®ããŸããã _app.jsã§Headãåé€ããŠããããã¯ä¿®æ£ãããŸããã§ããã _appãš_documentã®äž¡æ¹ã§Headãåé€ããŠããåé¡ã¯è§£æ±ºããŸããã§ããã æåŸã«ãã1ã€è©ŠããŠã¿ãŸãããã¿ã€ãã«ãšãã¡ãã³ã³ãèšå®ããããã«ã_documentã®Headãheadã«æ»ããHeadã_appã«æ®ããŸããããåé¡ã¯è§£æ±ºããŸããã
äœããã®çç±ã§åé¡ãåçºããå Žåã¯ãããã§å床æŽæ°ããŸãã ãã®æ å ±ãä¿®æ£ã«ã€ãªããããšãé¡ã£ãŠããŸãã
æŽæ°2ïŒåé¡ã¯è§£æ±ºããŸããããçºçããé »åºŠã¯äœããªããŸãã ãããçºçãããšããã®ããŒãžã®jsãããŒãããscriptã¿ã°ãè€è£œãããŠããããšã«æ°ã¥ããŸããã ããšãã°ãããŒãžãxããåããŠããŒããããšãè¿œå ãããŸã to the body. Now this script tag should only be added to the body once, but on the times it fails to load I see the script tag added a 2nd, and then if I click the link again it is added a 3rd time, and so on. These additional script tags are only added a few times while staying on the same page and clicking the link, however if I navigate to another page and back to where the link was, I can click it and add several more script tags.
Update 3: Problem happens after a while on a single link. Tested loading my home page and not clicking anything, after a couple minutes the Elements tab in Chrome dev tools flashes, I'm assuming a HMR, and ALL Links were broken. I hope all of this information wasn't just a waste of time for you guys. The issue doesn't seem to be happening in production, so I guess I'll just ignore it for the moment.
I think I also noticed the same thing a long ago, the day I shifted from NextJs 5 to NextJs 6 but ignored it since it's just dev problem. My production is working fine :)
çŸåšããã®åé¡ã調æ»ããŠããŸãã
ïŒ5994ã§è§£æ±º
åé¡ãäœã§ãã£ããããããŠä»ããã¢ããã°ã¬ãŒãã§ããªãå Žåã«åé¡ãåé¿ããæ¹æ³ãæããŠããã ããŸããïŒ ããšãã°ãããã¯cssã®èªã¿èŸŒã¿ãšé¢ä¿ããããŸããïŒ èšå®ã§å€æŽã§ãããã®ã§ããïŒ
@ jon64digitalãã®åé¡ã®å®å šãªèšäºãïŒ5994ã«æžããŸãããå»æ£æéå¶éãåŒãäžããããšã§ããã®åé¡ãåé¿ã§ããŸãã
@timneutkens 8.1.1-canary.24
ã䜿çšããŠããŸããããã°ã¯ãŸã ååšããŸãã äœãæ¡ãïŒ
ç·šéïŒäœãèµ·ãã£ãŠããã®ãã調ã¹ãŸããã çç±ãããããªã...ïŒ
index.tsxãã¡ã€ã«ãšindex.lessãã¡ã€ã«ããããŸããã netxt.config.jsãã¡ã€ã«ã§cssModulesã䜿çšããŠããŸããïŒwithLessã䜿çšïŒã ããŒãããå Žåã¯/subpage
ããã®åç
§ãªã³ã¯æã€/
ïŒãã®ãããªã¹ã¿ã€ã«ãã€ã³ããŒãããŠããïŒ import css from './index.less';
ïŒãã¹ã¯ãªãããåçã«ããŒããããŸãïŒ http://localhost:3000/_next/static/development/pages/index.js
ïŒãã ããã¬ã³ããªã³ã°ãããŸããã å®éãURLã¯ãŸã£ããå€æŽãããŠããããã¹ã¿ãã¯ããŠããããã§ã...å°ãªããã¡ã€ã«ã®ã€ã³ããŒããåé€ãããšãåé¡ã解決ããŸããã
ã¯ããã¯ïŒ
EDIT2ïŒç§ã¯ã«å®è¡ããŠããããã https://github.com/zeit/next-plugins/issues/282
8.1.0
ã§ãããããäœåºŠãçºçããŸãã åçŸããŠæ°åãéãããšæããŸã
ç§ã«ãšã£ãŠã/ aboutã«ãŒãã«ç§»åããªããšæ¯å404ãè¿ãããŸãïŒ ã«ãŒãã£ã³ã°ã®åé¡ãããããªãïŒïŒ ïŒ/
package.jsonã®äŸåé¢ä¿ïŒ
"dependencies": {
"cross-env": "^5.2.0",
"express": "^4.17.0",
"next": "^8.1.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
@jsbimraã¯åžžã«å®å šãªè€è£œãæäŸããŠãã ããã ãç§ã®ããã«èµ·ãããã調ã¹ãããšã¯äžå¯èœã§ã
@jsbimraã¯_åžžã«_å®å šãªè€è£œãæäŸããŠãã ããã ãç§ã®ããã«èµ·ãããã調ã¹ãããšã¯äžå¯èœã§ã
åé¡ãèŠã€ãããŸãããnext.jsã®ããŒãžãã©ã«ãã®äžã«ããŒãžãäœæããéã®æé ã®æ¬ èœã«é¢é£ããŠããŸããã@ timneutkensã«ãè¿·æããããããŠç³ãèš³ãããŸããã
ããã«å¯Ÿãã解決çã¯ãããŸããïŒ ããã¯æ¬çªç°å¢ã§ãçºçããŸããïŒ éçºã§ã¯ãããç§ã«èµ·ãã£ãŠããã®ã§ã2018幎ãš2019幎5æ22æ¥ããã®ãã°ã¯ãŸã ä¿®æ£ãããŠããŸããããããæ¬çªç°å¢ã§èµ·ãããªããã°ç§ã¯ããã»ã©å¿é ããŠããŸããããèµ·ãã£ãå Žåããã¯æ¬åœã«å€§ããªåé¡...
2018幎ãš2019幎5æ22æ¥ããã®ãã°ãŸã ãã®ãã°ã¯ä¿®æ£ãããŠããŸãã
@malimccallaã«ãã£ãŠæäŸãããè€è£œã«åºã¥ããŠãä¿®æ£ãããŸããã
ãããæ¬çªç°å¢ã§çºçããªãå Žåãç§ã¯ããã»ã©å¿é ããŠããŸãã
ããã§ã¯ãããŸããã
ãã®ã³ã¡ã³ãã¯ããªãã®åé¡ã解決ããã€ããã¯ãªãããšã«æ³šæããŠãã ããã åã«äœåºŠãèšã£ãããã«ïŒ
åžžã«å®å šãªè€è£œãæäŸããŠãã ããã ãç§ã®ããã«èµ·ãããã調ã¹ãããšã¯äžå¯èœã§ã
ææ°ããŒãžã§ã³ïŒ8.1.0ïŒã§ãåãåé¡ãçºçããŸãã
ææ°ããŒãžã§ã³ïŒ8.1.0ïŒã§ãåãåé¡ãçºçããŸãã
ç§ã¯ä»ããŸã£ããåãã¡ãã»ãŒãžã§çŽ3åè¿ä¿¡ããŸããã è€è£œãæäŸããŠãã ããã
ãã®ã³ã¡ã³ãã¯ããªãã®åé¡ã解決ããã€ããã¯ãªãããšã«æ³šæããŠãã ããã åã«äœåºŠãèšã£ãããã«ïŒ
åžžã«å®å šãªè€è£œãæäŸããŠãã ããã ãç§ã®ããã«èµ·ãããã調ã¹ãããšã¯äžå¯èœã§ã
~ / index.tsx
ã«ã¢ã¯ã»ã¹ã§ããªããšããåé¡ã«æ©ãŸãããŸããã
ããããç§ã¯ã€ãã«åå ãèŠã€ããŸããïŒ
react-activity
ãšããã©ã€ãã©ãªã䜿çšããŸããããåæã«cssãã€ã³ããŒãããå¿
èŠããããŸããã
åãcssãå¥ã®å Žæã§2åèªãã å Žåã移è¡ã§ããªãããã§ãã
_app.tsx
ãèªã¿èŸŒãã çµæãæ£åžžã«ç§»è¡ã§ããŸããã
@timneutkensã¯ãã確ãã«ãå»æ£æéãå¢ããããšã¯ã§ããŸããããµãŒããŒãåããŠèµ·åãããç¶æ³ã¯ã©ãã§ããïŒ ãããã¯ãŸã æ§ç¯ãããŠããªããããããã°ã©ã ã§ãããã®ããŒãžã«ç§»åããããšã¯ã§ããŸããã ð€
ç§ã¯ä»ããŸã£ããåãã¡ãã»ãŒãžã§çŽ4åè¿ä¿¡ããŸããã è€è£œãæäŸããŠãã ããã
ãã®ã³ã¡ã³ãã¯ããªãã®åé¡ã解決ããã€ããã¯ãªãããšã«æ³šæããŠãã ããã åã«äœåºŠãèšã£ãããã«ïŒ
åžžã«å®å šãªè€è£œãæäŸããŠãã ããã ãç§ã®ããã«èµ·ãããã調ã¹ãããšã¯äžå¯èœã§ã
ç¹å®ã®è³ªåã«çããããã«ãããŒãžã¯ãªã³ããã³ãã§äœæããããã®ã·ã¹ãã ã¯æ£åžžã«æ©èœããŸãã æ§æã«ãwebpackããã«ãã®å®äºæã«ãã¡ã€ã«ãããªã¬ãŒããªããããªãã®ããããšæããŸãã ãã ããè€è£œããªããããèšãã®ã¯é£ãã/äžå¯èœã§ãã
ãŸããåè¿°ã®ããã«ãç¹å®ã®åé¡ã¯ãã§ã«ä¿®æ£ãããŠãããã¿ã€ã ã¢ãŠããå¢ãããŠããçºçããŠããç¹å®ã®åé¡ã«ã¯åœ¹ç«ããªãããšã«æ³šæããŠãã ããã ãããã£ãŠããªãç§ã¯è€è£œãæ±ãç¶ããã®ã§ããðã
ç§ãã¡ã¯ããã調æ»ããããã«æéãè²»ããããšãéåžžã«å¬ããæããŸãã
ç§ã¯æšæ¥æ°ãããããžã§ã¯ããäœæããŸããããããŠããã¯ããŸããããŸããã ç§ã®ãããžã§ã¯ãã«ã¯ããããæ©èœããªãããã«ããç¹å®ã®äœãããªããã°ãªããŸããã ä»æ¥ã®åŸåã«åŸã ã«å解ããŠãåé¡ããªããªãæç¹ã確èªããŸãã
確å®ã«åçŸã§ãããèŠãŠã¿ããã§ãã
è¯ããã¥ãŒã¹ã¯ããšã©ãŒãç¹å®ã§ããããšã§ãã æªããã¥ãŒã¹ã¯ãç§ã®ãããžã§ã¯ãã®åé¡ãããã®ã¹ã¬ããã§ä»ã®äººãå ±åãããã®ãšå€ãããªãã£ãããšã§ãã
ãããã£ãŠãåé¡ãCSSãšå»æ£å¶éã«ãããããã解決ããããšæãããå Žåãç§ã¯äœãééã£ãããšãããŠããã«éããããŸããã ããã¯ããªãããããã眮ãå Žæã§ããïŒ
module.exports = withCSS({
onDemandEntries: {
maxInactiveAge: 1000 * 60 * 60
}
})
è€è£œïŒ https ïŒ
@dydokamil
æ¢ç¥ã®ãã°ïŒ https ïŒ
空ã®CSSãã¡ã€ã«ãã€ã³ããŒãããŠã解決ãããããšãã§ããŸãã
ãããéçºãæ¬çªãéçãšã¯ã¹ããŒãã®åã¢ãŒãã§ç¢ºå®ã«åçŸããããšãã§ããŸããã onDemandEntries
ãŸãã¯ç©ºã®cssãã¡ã€ã«ã®åé¿çã¯åœ¹ã«ç«ã¡ãŸããã§ããã
ãã®åé¡ã解決ããå¯äžã®æ¹æ³ã¯ãããã°æçš¿ããŒãžã®Bodyã³ã³ããŒãã³ãããimport 'highlight.js/styles/color-brewer.css';
ãåé€ããããš
ããã°æçš¿ããŒãžãæã<Link>
ã€ã³ã¹ã¿ã³ã¹ã¯ããŒãã«å€±æããŸããã <Link>
ã¯ãªãã¯ãããšhttp://localhost:3000/_next/static/development/pages/post.js
ãããŒãžã«ãããããããŸãã cssã€ã³ããŒããããã°æçš¿ãžã®<Link>
sãæ©èœããããšãã³ã¡ã³ãã¢ãŠãããŸãã ã³ã¡ã³ããå€ããšããã¹ãŠã®<Link>
ããã°æçš¿ã®èªã¿èŸŒã¿ã«å€±æããŸãã
ãããã®ããã°æçš¿ããŒãžã®ã«ãŒãã®ãããããããããããšãçŽæ¥æ£åžžã«æ©èœããŸãããã°ã¯ã¯ã©ã€ã¢ã³ãåŽã«ã®ã¿é¢é£ããŠããŸãã ããŒã¹ã®ã«ãŒãã£ã³ã°ã ããã¯ãããŒãžã§ã³6ããããŒãžã§ã³8ã«ã¢ããã°ã¬ãŒãããåŸã«çºçããŸããã
æåã¯@zeit/next-css
ããããããããŸãããã @zeit/next-sass
ã«ã¹ã¯ããããŠ.scssãã¡ã€ã«ãã€ã³ããŒãããåŸãåãæ¹æ³ã§ãã®åé¡ãåçŸã§ããŸãã ä»ã®ãšããã styled-components
drop @zeit/next-css
ã䜿çšããŠãããã®ã¹ã¿ã€ã«ãããŒãããŠããŸãã https://www.npmjs.com/package/@zeit/next -cssãšhttps://www.npmjs.com/package/@zeit/next -sassã確èªãããšããããããã®äœ¿çšäŸã¯å£ããŠããããã§ãã ð€
https://github.com/zeit/next-plugins/issues/282ã«è€è£œãªããžããªãè¿œå ããŠ
ããªãã説æããŠããããšã¯ããŸãã«ãã®åé¡ã®ããã«èãããŸãã
ãããéçºãæ¬çªãéçãšã¯ã¹ããŒãã®åã¢ãŒãã§ç¢ºå®ã«åçŸããããšãã§ããŸããã
onDemandEntries
ãŸãã¯ç©ºã®cssãã¡ã€ã«ã®åé¿çã¯åœ¹ã«ç«ã¡ãŸããã§ããããã®åé¡ã解決ããå¯äžã®æ¹æ³ã¯ãããã°æçš¿ããŒãžã®Bodyã³ã³ããŒãã³ããã
import 'highlight.js/styles/color-brewer.css';
ãåé€ããããšããã°æçš¿ããŒãžãæã
<Link>
ã€ã³ã¹ã¿ã³ã¹ã¯ããŒãã«å€±æããŸããã<Link>
ã¯ãªãã¯ãããšhttp://localhost:3000/_next/static/development/pages/post.js
ãããŒãžã«ãããããããŸãã cssã€ã³ããŒããããã°æçš¿ãžã®<Link>
sãæ©èœããããšãã³ã¡ã³ãã¢ãŠãããŸãã ã³ã¡ã³ããå€ããšããã¹ãŠã®<Link>
ããã°æçš¿ã®èªã¿èŸŒã¿ã«å€±æããŸãããããã®ããã°æçš¿ããŒãžã®ã«ãŒãã®ãããããããããããšãçŽæ¥æ£åžžã«æ©èœããŸãããã°ã¯ãã¯ã©ã€ã¢ã³ãåŽããŒã¹ã®ã«ãŒãã£ã³ã°ã«ã®ã¿é¢é£ããŠããŸãã ããã¯ãããŒãžã§ã³6ããããŒãžã§ã³8ã«ã¢ããã°ã¬ãŒãããåŸã«çºçããŸããã
æåã¯
@zeit/next-css
ããããããããŸãããã@zeit/next-sass
ã«ã¹ã¯ããããŠ.scssãã¡ã€ã«ãã€ã³ããŒãããåŸãåãæ¹æ³ã§ãã®åé¡ãåçŸã§ããŸãã ä»ã®ãšãããstyled-components
drop@zeit/next-css
ã䜿çšããŠãããã®ã¹ã¿ã€ã«ãããŒãããŠããŸãã https://www.npmjs.com/package/@zeit/next -cssãšhttps://www.npmjs.com/package/@zeit/next -sassã確èªãããšããããããã®äœ¿çšäŸã¯å£ããŠããããã§ãð€
next / cssããã±ãŒãžãè¿œå ããåŸããããç§ã«ãèµ·ãã£ãããšã確èªã§ããŸãã
éçºäžãåãããšãèµ·ãããŸããïŒæ¬çªç°å¢ã¯æåŸ ã©ããã«æ©èœããŸãïŒãåé¡ã¯ãsassãã¡ã€ã«ãã€ã³ããŒãããããŒãžã«ãªã³ã¯ããïŒãŸãã¯å éšã«ã³ã³ããŒãã³ããããïŒå Žåã§ãã
ç§ã®next.config.js
ãã¡ã€ã«ïŒ
const withSass = require('@zeit/next-sass');
const withBundleAnalyzer = require('@next/bundle-analyzer')({
enabled: process.env.ANALYZE === 'true',
});
require('dotenv').config();
module.exports = withBundleAnalyzer(
withSass({
distDir: '../dist',
env: {...},
}),
);
ãããã£ãŠã詳现ãªã³ã³ããŒãã³ãã®1ã€ã«æ¬¡ã®ã€ã³ããŒãããããŸãã
// MIGRATE: PriceDetail to styled components
import './PriceDetail.scss';
ã€ã³ããŒãã«ã³ã¡ã³ããããšããªã³ã¯ãæ©èœãå§ããŸãã ãããã£ãŠã withSass
ãã©ã°ã€ã³ã®åé¡ã®ããã§ãã
ç§ã¯åããããªåé¡ãæ±ããŠããŸãããåãã§ã¯ãããŸããã æ®å¿µãªãããåããšã©ãŒãçºçããŸã
çç£ã§ãã ããããããã€ãã®çç±ã§ãªã³ã¯ãæ©èœããããšããããŸãã
次ã®9.4ã§ãåãåé¡ãçºçããŸãã
æšæ¥CodeMirror
ããããžã§ã¯ãã«è¿œå ããŸããimport "codemirror/lib/codemirror.css"
ç§ã¯pages / page2.jsã®ãããªãã®ãæã£ãŠããŠãããã¯ããã€ãã®ããšãè¡ãããã®æåŸã«router.replace("/")
ãåŒã³åºããŸãããçªç¶äœãããªããªããŸããã
ãããã¬ãŒã§router.replace("/")
ãå®è¡ãããšã catch
ãŸãã¯finally
ãããã¯ã解決ãŸãã¯ãããããªãpromiseã衚瀺ãããŸããã
ãŸãããããã泚ç®ã«å€ããã®ã¯ãnext.config.jsã«next-cssãããããšã§ãããããåé€ããŠã圱é¿ããããã©ããã確èªããŸãã
ããã«ããããã£ãã¯ã¹ãããããã«èŠããŸããïŒ =ïŒ
ãããããã§åé¡ã¯è§£æ±ºããŸãããã€ã³ããŒããã·ã§ã«ã®_app.js
ãã¡ã€ã«ã«ã移åããå¿
èŠããã£ãããšã¯æããã§ãã
æãåèã«ãªãã³ã¡ã³ã
çŸåšããã®åé¡ã調æ»ããŠããŸãã