Next.js App Routerã«ãããè¨è¨ããã¹ããã©ã¯ãã£ã¹ããçè ãªãã«ã¾ã¨ãã¾ããã
Next.js App Routerã«ãããè¨è¨ããã¹ããã©ã¯ãã£ã¹ããçè ãªãã«ã¾ã¨ãã¾ããã
This content is not yet available in English - I'm working on it. next/font ã¨ã¯ ã«ã¹ã¿ã ãã©ã³ããå«ããã©ã³ããèªåçã«æé©åãããã©ã¤ãã·ã¼ã¨ããã©ã¼ãã³ã¹åä¸ã®ããå¤é¨ãããã¯ã¼ã¯ãªã¯ã¨ã¹ããåé¤ãããã®ã§ãã Next.js v13 ã§è¿½å ã«ãªã£ã app ãã£ã¬ã¯ããªã¨ãã以åã® pages ãã©ã«ãã§ãæ©è½ãã¾ãã ããã§ã¯ app ãã£ã¬ã¯ããªã§ã®ä½¿ç¨æ¹æ³ã«ã¤ãã¦ç´¹ä»ãã¾ãã æ§æè¦ä»¶ next: 13.1.6 @next/font: 13.1.6 Google Fonts ã®å ´å æé«ã®ããã©ã¼ãã³ã¹ã®ããã«ã¯ Variable fonts ã®ä½¿ç¨ãæ¨å¥¨ããã¦ãã¾ããVariable fonts ã§ãªãã¦ã使ç¨å¯è½ã§ãã Demo & Source (CodeSandbox) åºæ¬çãªæ¸ãæ¹ app
Next.jsÃTypeScriptÃmicroCMSÃMantineUIÃNetlifyã§ããã°ã使ããã®ã§ã¾ã¨ãã¨ææ³ ã¯ããã« ãã®è¨äºã¯ãã¿ã¤ãã«ã«è¨è¼ã®éãã®æè¡ã¹ã¿ãã¯ã§è¶£å³ã®èç管çç¨ã®ããã°ã使ããã®ã§ãç°¡åã«ã¾ã¨ãã¨ææ³ãæ¸ãã¦ãããã¨æãã¾ãã å®éã®ããã°ã¯ãã¡ã GitHubãªãã¸ããªã¯ãã¡ãï¼åèã«ãªã£ãæ¹ã¯ðããããã¨ðï¼ ããã°ä½æã®åæ© æ®æ®µæ¥åã§Nextjs(React)ã触ã£ã¦ãããSSRããå¿ è¦ããªãã¢ããªã±ã¼ã·ã§ã³ã¨ãããã¨ãããããã¡ã¤ã«ã«ã¼ãã£ã³ã°ã®æ©è½ããããã触ã£ã¦ããªãã£ããããSSGãSSRã®æ©è½ãã¡ãã£ã¨è§¦ã£ã¦ããããã£ãã®ã¨ãæè¿æµè¡ãã®JAMStackæ§æãmicroCMSãç¨ãã¦çµé¨ãã¦ããããã£ãã¨ãã2ç¹ã主ãªåæ©ã§ãã ãã¨ãå¤ãã¦ããä¼ç¤¾ã§ãã¼ã ãã¼ã¸ãä½ãç´ã話ãããã£ã¦ããã®ã§ãJAMStackæ§æãææ¡ããã
class SampleDocument extends Document { static async getInitialProps(ctx) { const initialProps = await Document.getInitialProps(ctx) return { ...initialProps } } render() { return ( <Html> <Head> <link rel="dns-prefetch" href="//www.google.co.jp" /> </Head> <body> <Main /> <NextScript /> </body> </Html> ) } } export default SampleDocument _document.js(tsx)ã§ã¯ã<Html>, <Head />, <Main />, <NextScript
Material UI ã® v5 ããªãªã¼ã¹ããã¾ããã v5 ãã MUI ã¨ãã¦æ°ãããªãã¥ã¼ã¢ã«ããã¾ããã å ¬å¼ãµã¤ãããªãã¥ã¼ã¢ã«ãã¦ãã¾ããã v5 ããå é¨ã§ä½¿ç¨ããã¦ããã¹ã¿ã¤ãªã³ã°ã½ãªã¥ã¼ã·ã§ã³ã Emotion ã styled-components ã鏿ã§ãã¾ãã ä»å㯠Next.js/Typescript ããã¸ã§ã¯ãã« Material-UI/Emotion ãå°å ¥ãã¾ãã ã¾ãä»åããæ°ãã«è¿½å ããã MUI ã®æ°æ©è½ã夿´ãããè¨è¿°æ¹æ³ã試ãã¦ã¿ã¾ãã ä»åã½ã¼ã¹ã¯åºæ¬çã«ã¯å ¬å¼ Github ã® example ãåç §è´ãã¾ããã ç°å¢macOS Big Sur 11.15.2Next.js 11.1.2Typescript 4.4.3npm 7.7.6yarn 1.22.4Next.js ã®ããã¸ã§ã¯ãã使以ä¸ã®ã³ãã³ããå®è¡ã㦠Typescrip
æè¿ã®æµããè¦ã¦ãã¦ã®ææ³æãªã®ã§ãideaã¨ãã¦æç¨¿ãã¾ããçè ã®ããã¯ã°ã©ã¦ã³ãã¨ãã¦ã¯ãRemixã®åæ¥è¨äºãæ¸ããããApp Routerã®åæ¥è¨äºãæ¸ããããã¦ãã人ã§ãã ãã¦ãçè ã¯2022å¹´ã®ç§ããã社å ã·ã¹ãã ã§ã¯ããã¾ããRemixããããã¯ã·ã§ã³éç¨ãã¦ãã¾ããã¾ããNext.jsã®App Routerã«ã¤ãã¦ãããã©ãã¤ã ã¨ãã¦ã¯Remixã«ã¤ã³ã¹ãã¤ã¢ãããé¨åãå¤ã[1]ãããã§ãé 調ã«ãã£ããã¢ããã§ãã¦ãã¾ãã Remixã¨App Routerã¯ãã«ã¼ãã£ã³ã°ã¨ãã¼ã¿ãã§ãããé«åº¦ã«çµ±åãã¦ãããProgressively Enhanced SPAï¼PESPAï¼ã¨å¼ã°ãããã¨ãããããã§ããPESPAã«ã¤ãã¦ã¯ã次ã®è¨äºã話é¡ã«ãªãã¾ãããã ãã®PESPAã§ããRemixãå®éç¨ããä¸ã§ããã¬ã¼ã ã¯ã¼ã¯ã®æè§¦ããè¿å¹´è§¦ã£ã¦ãããã®ã¨å¤§ããéã£ã¦ããç¹ããã£
next.config.jsã«output: "export"ã追å ããã°ããã¿ããã (appDir: trueã¯ããã¥ã¡ã³ãããæ¶ãã¦ãããã©ãä¸è¦ã«ãªã£ãã®ããª) åè¨æ¤åãç¡ãã¨ã¨æããã Error: > The `app` directory is experimental. To enable, add `appDir: true` to your `next.config.js` configuration under `experimental`. See https://nextjs.org/docs/messages/experimental-app-dir-config
import { NextRequest, NextResponse } from 'next/server'; export const config = { matcher: ['/:path*'], }; export function middleware(req: NextRequest) { // éçºæã§ã¯èªè¨¼ãã¹ããã if (process.env.NODE_ENV === 'development') { return NextResponse.next(); } // ç°å¢å¤æ°ãè¨å®ããã¦ããªãå ´åã¯èªè¨¼ãã¹ããã if (!process.env.BASIC_AUTH_PASSWORD) { return NextResponse.next(); } const basicAuth = req.headers.get('authorization'); const
ãã¯ãããããã£ãªï½ ã¨ãããã¨ã§æè¿Next.js13ã§ãã±ã¢ã³é¢é£ã®webã¢ããªãä½ã£ãã®ã§ããã Next.js13ã®App Directryã触ããã®ãåãã¦ã ã£ãã®ã§è¦æ¦ããã ç¹ã«Analyticsã¯é¿ãã¦éããªãã®ã«ããããããæ¥æ¬èªã®æ å ±ãä¸è¶³ãã¦ããæããããã®ã§ãè§£æ±ºæ¹æ³ããä¼ãã§ããã°ã¨æãã¾ã ã¡ãªã¿ã«ä½ã£ãã®ã¯ããã±ã¢ã³ã®ã¿ã¤ãç¸æ§ã詳細ã«ç¥ãããµã¼ãã¹ã§ã ããã«åãã«ä½¿ããããæ©è½ã追å ãã¦ããã¤ãããªã®ã§ãããã£ããè¦ã¦ãã£ã¦ãã ãã åæ Google Analyticsãå°å ¥ããåæ°ããããªã«å¤ããªãã®ã§ãåã¨åãããã«èª¿ã¹ãªããé²ãã¦ãã¾ããã ã¨ããããããã®ãããªãµã¤ãã使ã£ã¦ãã¼ãããªã®ãã£ããªã§é²ãã¦ããã¾ãã ä¸å¿ãããã¯Client Componentã使ãã¹ãã ã¨æã£ãã®ã§ãlayout.tsxããåãé¢ãã¦ä½ã£ãããã¾ãã å¨è¾ºã¯ãããª
ããã«ã¡ã¯ãããã (@yoshio__25) ã§ãã Webããã³ãã¨ã³ã¸ãã¢ã¯çãããä¸ã®ã¨ã©ã¼ãä¸åº¦ã¯ç®ã«ãããã¨ãããã®ã§ã¯ãªãã§ããããã CORSã¨ã¯ MDN ã«ä»¥ä¸ã®ããã«è¨è¿°ããã¦ãã¾ãã ãªãªã¸ã³éãªã½ã¼ã¹å ±æ (Cross-Origin Resource Sharing, CORS) ã¯ã追å ã® HTTP ãããã¼ã使ç¨ãã¦ããããªãªã¸ã³ã§åä½ãã¦ããã¦ã§ãã¢ããªã±ã¼ã·ã§ã³ã«ãç°ãªããªãªã¸ã³ã«ãã鏿ããããªã½ã¼ã¹ã¸ã®ã¢ã¯ã»ã¹æ¨©ãä¸ãããããã©ã¦ã¶ã¼ã«æç¤ºããããã®ä»çµã¿ã§ãã ã¤ã¾ãä¸ã®ã¨ã©ã¼ã¡ãã»ã¼ã¸ã¯ãç°ãªããªãªã¸ã³ã¸ã®ã¢ã¯ã»ã¹ããããã¨ããã¨ãã«ãã»ãã¥ãªãã£ä¸ã®çç±ãããã®ããªã·ã¼ã«åãã¦ããããããªã¯ã¨ã¹ãããããã¯ããæ¨ãä¼ãã¦ãã¾ãã ãã®ããªã·ã¼ã¯ãã¡ãã製åã®éçºæã«ãé©ç¨ããã¾ãã ã¤ã¾ãéçºç¨ã® localhost ãµã¼ãã¼ãç«ã¦ã¦ãããããéçº
Next.js ã®ããã¥ã¡ã³ãã¸ããããï¼ Next.js ãåãã¦ä½¿ç¨ããå ´åã¯ãå¦ç¿ã³ã¼ã¹ããå§ãããã¨ããå§ããã¾ãã å¦ç¿ã³ã¼ã¹ã¯ç¿»è¨³ããã¦ãã¾ããã ã¤ã³ã¿ã©ã¯ãã£ããªã¯ã¤ãºã«ããå¦ç¿ã³ã¼ã¹ã§ã¯ãNext.js ã使ãããã«å¿ è¦ãªãã¹ã¦ã®ç¥èãç¿å¾ã§ãã¾ãã Next.js ã«é¢é£äºé ãã質åãããå ´åã¯ãGitHub Discussions ã®ã³ãã¥ããã£ã¼ã§ãªãã§ã質åãã¦ãã ããã ã·ã¹ãã è¦ä»¶ Node.js 12.22.0 ã¾ãã¯ããã以é MacOS, Windows (WSL ãå«ã)ããã㦠Linux ããµãã¼ã èªåã»ããã¢ãã ãã¹ã¦ãèªåçã«ã»ããã¢ãããã create-next-app ã使ã£ã¦ãNext.js ã¢ããªã使ãããã¨ããå§ããã¾ããããã¸ã§ã¯ãã使ããããã«ã次ãå®è¡ãã¾ã: npx create-next-app@latest #
æ¦è¦next/imageã¯ç»åãèªåã§æé©åãã¦ããã便å©ãªã³ã³ãã¼ãã³ãã§ãã 使ç¨ã«ã¯åºæ¬çã«ãµã¤ãºï¼width, heightï¼ãäºåã«æå®ããå¿ è¦ãããã¾ãããAPIããç»åãåãåã£ã¦è¡¨ç¤ºããå ´åãªã©ãäºåã«ãµã¤ãºãæå®ããããªãã±ã¼ã¹ãããã¨æãã¾ãã ãã®è¨äºã§ã¯ããã®ãããªå ´åã§ãnext/imageã使ã£ã¦ç»åã表示ããæ¹æ³ããç´¹ä»ãã¾ãã ç°å¢ã¨ãã¦ã¯ãNext 12.1.2 ã使ç¨ãã¾ãã Next.js 13以ä¸ã使ç¨ããå ´åã¯ããã¡ãã®è¨äºãã覧ãã ããã
åãæ¥ãã¡ã¢ ä½ããããã£ããã¡ã¢ ã¨ãããµã¤ãï¼Nginx+WordPressï¼ã®ãµããã£ã¬ã¯ããªã ããNext.jsã§åããããã£ã SEOãèããªãã¨ãããªãã®ã§ãhoge.vercel.app ã®ãã¡ã¤ã³ã§ã¢ã¯ã»ã¹ã§ããªããããã£ã ãã£ãã㨠next.config.js ãä¿®æ£ { ... basePath: isProduction ? SUB_DIRECTORY : '', assetPrefix: isProduction ? SUB_DIRECTORY : '', // Imageã³ã³ãã¼ãã³ãã使ãå ´å㯠basePath ãsrcã§æå®ããªããã°ãªããªã publicRuntimeConfig: { basePath: isProduction ? SUB_DIRECTORY : '', } ... } routing -> åé¡ãªã JSã¾ãã -> åé¡ãªã i
ã©ã³ãã³ã°
ã©ã³ãã³ã°
ã¡ã³ããã³ã¹
ãªãªã¼ã¹ãé害æ å ±ãªã©ã®ãµã¼ãã¹ã®ãç¥ãã
ææ°ã®äººæ°ã¨ã³ããªã¼ã®é ä¿¡
å¦çãå®è¡ä¸ã§ã
j次ã®ããã¯ãã¼ã¯
kåã®ããã¯ãã¼ã¯
lãã¨ã§èªã
eã³ã¡ã³ãä¸è¦§ãéã
oãã¼ã¸ãéã
{{#tags}}- {{label}}
{{/tags}}