inflearn logo
inflearn logo

ๆ‰‹ใง็†Ÿใ™Next.js - ๅ…ฌๅผใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’่ฆ‹ใ‚‹

ๅ…ฌๅผใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใงๆœ€ๆ–ฐใฎNext.jsใ‚’ๅญฆใณใพใ™ใ€‚ใƒˆใƒฉใƒ–ใƒซใ‚ทใƒฅใƒผใƒ†ใ‚ฃใƒณใ‚ฐใฎใƒ„ใƒผใƒซใจใ—ใฆใ€Next.jsใŒๅฟ…่ฆใช็†็”ฑใ‚’็†่งฃใงใใพใ™๏ผ

้›ฃๆ˜“ๅบฆ ๅˆ็ดš

ๅ—่ฌ›ๆœŸ้–“ ็„กๅˆถ้™

Next.js
Next.js
next.js13
next.js13
React
React
TypeScript
TypeScript
Next.js
Next.js
next.js13
next.js13
React
React
TypeScript
TypeScript

ใŠ็Ÿฅใ‚‰ใ›

1 ไปถ

  • hajoeun๋‹˜์˜ ํ”„๋กœํ•„ ์ด๋ฏธ์ง€

    ๏ฝฅ

    ไฟฎๆญฃๆธˆใฟ

    Next.js 14

    ๅŽปใ‚‹10ๆœˆ26ๆ—ฅNext.js Confใ‚’้€šใ˜ใฆNext.js 14ใŒๅ…ฌ้–‹ใ•ใ‚Œใพใ—ใŸใ€‚

    ไปŠๅ›žใฎใ‚คใƒ™ใƒณใƒˆใง็ดนไป‹ใ•ใ‚ŒใŸไธปใชๅ†…ๅฎนใฏใ€Turbopackใ€Server Actionsใ€Partial Prerendering๏ผˆPPR๏ผ‰ใ€Next.js Learnใงใ™ใ€‚

     

    Next.js 13ใจใฎ้•ใ„

    Next.js 14ใŒๅ…ฌ้–‹ใ•ใ‚ŒใŸไปŠใ€Next.js 13ใ‹ใ‚‰ๅง‹ใ‚ใฆใ‚‚ใ„ใ„ใงใ™ใ‹๏ผŸ

    ็งใฎ่ฌ›็พฉใฏNext.js 13ใƒใƒผใ‚ธใƒงใƒณใซๅŸบใฅใ„ใฆๅˆถไฝœใ•ใ‚ŒใŸใฎใงใ€ๅ—่ฌ›็”Ÿใฎๆ–นใŒไธŠ่จ˜ใฎใ‚ˆใ†ใช็–‘ๅ•ใ‚’ๆŠฑใใ‚ˆใ†ใงใ™ใ€‚

    Next.js 14ใฏ13ใจๆฏ”่ผƒใ—ใฆๅคงใใๅค‰ใ‚ใฃใฆใ„ใพใ›ใ‚“ใงใ—ใŸใ€‚

    ๅคงใใๅค‰ใ‚ใฃใŸ็‚นใŒใชใ„ใฎใซใƒใƒผใ‚ธใƒงใƒณใŒ14ใซๅค‰ๆ›ดใ•ใ‚ŒใŸ็†็”ฑใฏใ‚ใ‚Šใพใ™ใ‹๏ผŸ

    ่‰ฏใ„่ณชๅ•ใงใ™ใ€‚ๅพ“ๆฅใฏNode 16.14ไปฅ้™ใฎใƒใƒผใ‚ธใƒงใƒณใซๅŸบใฅใ„ใฆๅ‹•ไฝœใ—ใฆใ„ใพใ—ใŸใŒใ€ไปŠๅ›žใฎNext.js 14ใงใฏNode 18.17ไปฅ้™ใฎใƒใƒผใ‚ธใƒงใƒณใซๅŸบใฅใ„ใฆๅ‹•ไฝœใ—ใพใ™ใ€‚ใ“ใฎใ‚ˆใ†ใช็†็”ฑใงใƒใƒผใ‚ธใƒงใƒณใ‚’ไธŠใ’ใŸใใ†ใงใ™ใ€‚

     

    ๅค‰ๅŒ–ใซๅฏพๅฟœใ™ใ‚‹

    ใ‚ใพใ‚Šใซใ‚‚ๆ—ฉใ„ๅค‰ๅŒ–ใซใฟใ‚“ใชๆ…Œใฆใ‚‹ใ‹ใ€ใƒใ‚ฟใ‚‹ใฎใ‹ๅˆ†ใ‹ใ‚‰ใชใ„ใ€‚

    ใ™ใใซๆ–ฐใ—ใ„ๆŠ€่ก“ใŒๆณจใŒใ‚Œใ‚‹ใ‹ใ‚‰ใจใ„ใฃใฆใ€่ชฐใ‚‚ใŒ็Ÿฅใ‚‹ๅฟ…่ฆใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚ๅฟ…่ฆใชใจใใซๅญฆใ‚“ใงใ‚‚้…ใใฏใ‚ใ‚Šใพใ›ใ‚“ใ€‚่ฒ ๆ‹…ใ—ใชใ„ใง็งใจไธ€็ท’ใซใ˜ใฃใใ‚Šๅญฆใ‚“ใงใ„ใฃใฆใปใ—ใ„๏ผ

    Next.js 14็งป่กŒใ‚ฌใ‚คใƒ‰ใซๅพ“ใ†ใจใ€็ฐกๅ˜ใซไพ‹ใฎใƒใƒผใ‚ธใƒงใƒณใ‚’14ใซใ‚ขใƒƒใƒ—ใ‚ฐใƒฌใƒผใƒ‰ใงใใพใ™ใ€‚่ฌ›็พฉใงไฝฟ็”จใ•ใ‚Œใฆใ„ใ‚‹ๅคฉๆฐ—ใ‚ขใƒ—ใƒชใซ้ฉ็”จใ—ใŸใƒ–ใƒฉใƒณใƒใ‚‚ใ‚ใ‚Šใพใ™ใฎใงใ”็ขบ่ชใใ ใ•ใ„ใ€‚ ( hajoeun/weather-app/tree/next-js-14 )

       

    ๆ–ฐใ—ใ„ๅญฆ็ฟ’่ณ‡ๆ–™

    Next.js 13ใพใงใฏใ€ๅ…ฌๅผใƒใƒฅใƒผใƒˆใƒชใ‚ขใƒซใงApp Routerใ‚’็ดนไป‹ใ—ใฆใ„ใพใ›ใ‚“ใงใ—ใŸใ€‚ไปŠๅ›žๆ–ฐใ—ใใƒชใƒ‹ใƒฅใƒผใ‚ขใƒซใ•ใ‚ŒใŸใƒšใƒผใ‚ธใงNext.js 13ใซๅฐŽๅ…ฅใ•ใ‚ŒใŸๆ–ฐๆฉŸ่ƒฝใ‚‚ไธ€็ท’ใซใŠ็Ÿฅใ‚‰ใ›ใ—ใฆใ„ใพใ™ใ€‚

    ็งใฎใƒใƒณใƒ‰ใƒ–ใƒƒใ‚ฏใงๆ‰ฑใ†ใ“ใจใŒใงใใชใ‹ใฃใŸ้ƒจๅˆ†ใ‚‚ไฝœๆˆใ—ใชใŒใ‚‰ๅญฆในใ‚‹ใ‚ฌใ‚คใƒ‰ใ‚’ๆไพ›ใ—ใฆใ„ใ‚‹ใฎใงใ€ไธ€็ท’ใซ่ฆ‹ใฆใฟใ‚‹ใจ่‰ฏใ„ใจๆ€ใ„ใพใ™ใ€‚

    ไธ€ๆ–นใงใ‚ใพใ‚Šใซใ‚‚่†จๅคงใชๅ†…ๅฎนใ‚’ๆ‰ฑใฃใฆใ„ใ‚‹ใฎใงใ€็งใฎใƒใƒณใƒ‰ใƒ–ใƒƒใ‚ฏใ‚’ๅ…ˆใซ่ฆ‹ใฆใฟใ‚‹ๆ–นใŒ็†่งฃใ™ใ‚‹ใฎใซๅฝน็ซ‹ใคใจๆ€ใ„ใพใ™๏ผ ๏ผˆๆ‰‹ใซใคใNext.js - ๅ…ฌๅผใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’่ฆ‹ใ‚‹๏ผšhttps: //book.hajoeun.dev/friendly-next-js/ ๏ผ‰

    0

๏ฟฅ3,152