Next.js ಆಪ್ ರೂಟರ್: ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್‌ಗೆ ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ

Next.js 13 ರಲ್ಲಿ ಪರಿಚಯಿಸಲಾದ ಮತ್ತು ನಂತರದ ಆವೃತ್ತಿಗಳಲ್ಲಿ ಪ್ರಮಾಣಿತವಾದ Next.js ಆಪ್ ರೂಟರ್, ನಾವು ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ಹೇಗೆ ರಚಿಸುತ್ತೇವೆ ಮತ್ತು ನ್ಯಾವಿಗೇಟ್ ಮಾಡುತ್ತೇವೆ ಎಂಬುದನ್ನು ಕ್ರಾಂತಿಗೊಳಿಸುತ್ತದೆ. ಇದು ಶಕ್ತಿಯುತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಯನ್ನು ಪರಿಚಯಿಸುತ್ತದೆ, ಇದು ಅಭಿವೃದ್ಧಿಯನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ, ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ಒಟ್ಟಾರೆ ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಹೆಚ್ಚಿಸುತ್ತದೆ. ಈ ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿಯು ಆಪ್ ರೂಟರ್‌ನ ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಅನ್ನು ಆಳವಾಗಿ ಪರಿಶೀಲಿಸುತ್ತದೆ, ನಿಮಗೆ ದೃಢವಾದ ಮತ್ತು ಸ್ಕೇಲೆಬಲ್ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಬೇಕಾದ ಜ್ಞಾನ ಮತ್ತು ಕೌಶಲ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಎಂದರೇನು?

ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಎನ್ನುವುದು ಒಂದು ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಯಾಗಿದ್ದು, ಇದರಲ್ಲಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್‌ಗಳ ರಚನೆಯು ನಿಮ್ಮ ಫೈಲ್‌ಗಳು ಮತ್ತು ಡೈರೆಕ್ಟರಿಗಳ ಸಂಘಟನೆಯಿಂದ ನೇರವಾಗಿ ನಿರ್ಧರಿಸಲ್ಪಡುತ್ತದೆ. Next.js ಆಪ್ ರೂಟರ್‌ನಲ್ಲಿ, ನೀವು `app` ಡೈರೆಕ್ಟರಿಯೊಳಗೆ ಫೈಲ್‌ಗಳನ್ನು ರಚಿಸುವ ಮೂಲಕ ರೂಟ್‌ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತೀರಿ. ಪ್ರತಿಯೊಂದು ಫೋಲ್ಡರ್ ಒಂದು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್ ಅನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ, ಮತ್ತು ಆ ಫೋಲ್ಡರ್‌ಗಳೊಳಗಿನ ವಿಶೇಷ ಫೈಲ್‌ಗಳು ಆ ರೂಟ್ ಸೆಗ್ಮೆಂಟ್ ಅನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತವೆ. ಈ ವಿಧಾನವು ಹಲವಾರು ಪ್ರಯೋಜನಗಳನ್ನು ನೀಡುತ್ತದೆ:

• ಅರ್ಥಗರ್ಭಿತ ರಚನೆ: ಫೈಲ್ ಸಿಸ್ಟಮ್ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್ ರಚನೆಯನ್ನು ಪ್ರತಿಬಿಂಬಿಸುತ್ತದೆ, ಇದು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
• ಸ್ವಯಂಚಾಲಿತ ರೂಟಿಂಗ್: Next.js ನಿಮ್ಮ ಫೈಲ್ ರಚನೆಯ ಆಧಾರದ ಮೇಲೆ ಸ್ವಯಂಚಾಲಿತವಾಗಿ ರೂಟ್‌ಗಳನ್ನು ರಚಿಸುತ್ತದೆ, ಇದರಿಂದಾಗಿ ಹಸ್ತಚಾಲಿತ ಕಾನ್ಫಿಗರೇಶನ್‌ನ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ.
• ಕೋಡ್ ಸಹ-ಸ್ಥಳ: ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ಮತ್ತು UI ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಒಂದೇ ಸ್ಥಳದಲ್ಲಿರುತ್ತವೆ, ಇದು ಕೋಡ್ ಸಂಘಟನೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಸುಧಾರಿಸುತ್ತದೆ.
• ಅಂತರ್ನಿರ್ಮಿತ ವೈಶಿಷ್ಟ್ಯಗಳು: ಆಪ್ ರೂಟರ್ ಲೇಔಟ್‌ಗಳು, ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು, ಡೇಟಾ ಫೆಚಿಂಗ್ ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ಸಂಕೀರ್ಣ ರೂಟಿಂಗ್ ಸನ್ನಿವೇಶಗಳನ್ನು ಸರಳಗೊಳಿಸುತ್ತದೆ.

ಆಪ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಪ್ರಾರಂಭಿಸುವುದು

ಆಪ್ ರೂಟರ್ ಅನ್ನು ಬಳಸಲು, ನೀವು ಹೊಸ Next.js ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಬೇಕು ಅಥವಾ ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಮೈಗ್ರೇಟ್ ಮಾಡಬೇಕು. ನೀವು Next.js ಆವೃತ್ತಿ 13 ಅಥವಾ ನಂತರದ ಆವೃತ್ತಿಯನ್ನು ಬಳಸುತ್ತಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ.

ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸುವುದು:

ಕೆಳಗಿನ ಕಮಾಂಡ್ ಬಳಸಿ ನೀವು ಆಪ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಹೊಸ Next.js ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ರಚಿಸಬಹುದು:

npx create-next-app@latest my-app --example with-app

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಮೈಗ್ರೇಟ್ ಮಾಡುವುದು:

ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಮೈಗ್ರೇಟ್ ಮಾಡಲು, ನೀವು ನಿಮ್ಮ ಪುಟಗಳನ್ನು `pages` ಡೈರೆಕ್ಟರಿಯಿಂದ `app` ಡೈರೆಕ್ಟರಿಗೆ ಸರಿಸಬೇಕಾಗುತ್ತದೆ. ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ನಿಮ್ಮ ರೂಟಿಂಗ್ ತರ್ಕವನ್ನು ನೀವು ಹೊಂದಿಸಬೇಕಾಗಬಹುದು. ಈ ಪ್ರಕ್ರಿಯೆಯಲ್ಲಿ ನಿಮಗೆ ಸಹಾಯ ಮಾಡಲು Next.js ಒಂದು ಮೈಗ್ರೇಶನ್ ಗೈಡ್ ಅನ್ನು ಒದಗಿಸುತ್ತದೆ.

ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್‌ನ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು

ಆಪ್ ರೂಟರ್ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಹೇಗೆ ನಿರ್ವಹಿಸಲಾಗುತ್ತದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಹಲವಾರು ವಿಶೇಷ ಫೈಲ್‌ಗಳು ಮತ್ತು ಸಂಪ್ರದಾಯಗಳನ್ನು ಪರಿಚG್ಞಾಪಿಸುತ್ತದೆ:

1. `app` ಡೈರೆಕ್ಟರಿ

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ರೂಟ್‌ಗಳ ಮೂಲ `app` ಡೈರೆಕ್ಟರಿಯಾಗಿದೆ. ಈ ಡೈರೆಕ್ಟರಿಯೊಳಗಿನ ಎಲ್ಲಾ ಫೈಲ್‌ಗಳು ಮತ್ತು ಫೋಲ್ಡರ್‌ಗಳನ್ನು ರೂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ. `app` ಡೈರೆಕ್ಟರಿಯ ಹೊರಗಿನ ಯಾವುದನ್ನಾದರೂ (ನೀವು ಮೈಗ್ರೇಟ್ ಮಾಡುತ್ತಿದ್ದರೆ `pages` ಡೈರೆಕ್ಟರಿಯಂತಹ) ಆಪ್ ರೂಟರ್ ನಿರ್ಲಕ್ಷಿಸುತ್ತದೆ.

2. `page.js` ಫೈಲ್

`page.js` (ಅಥವಾ `page.jsx`, `page.ts`, `page.tsx`) ಫೈಲ್ ಆಪ್ ರೂಟರ್‌ನ ಅತ್ಯಂತ ಮೂಲಭೂತ ಭಾಗವಾಗಿದೆ. ಇದು ನಿರ್ದಿಷ್ಟ ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ಗಾಗಿ ರೆಂಡರ್ ಮಾಡಲಾಗುವ UI ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ನೀವು ನೇರವಾಗಿ ಪ್ರವೇಶಿಸಲು ಬಯಸುವ ಯಾವುದೇ ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ಗೆ ಇದು ಅಗತ್ಯವಾದ ಫೈಲ್ ಆಗಿದೆ.

ಉದಾಹರಣೆ:

ನಿಮ್ಮಲ್ಲಿ ಈ ರೀತಿಯ ಫೈಲ್ ರಚನೆ ಇದ್ದರೆ:

app/
  about/
    page.js

ಬಳಕೆದಾರರು `/about` ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ `app/about/page.js` ನಿಂದ ರಫ್ತು ಮಾಡಲಾದ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗುತ್ತದೆ.

// app/about/page.js
import React from 'react';

export default function AboutPage() {
  return (
    <div>
      <h1>ನಮ್ಮ ಬಗ್ಗೆ</h1>
      <p>ನಮ್ಮ ಕಂಪನಿಯ ಬಗ್ಗೆ ಇನ್ನಷ್ಟು ತಿಳಿಯಿರಿ.</p>
    </div>
  );
}

3. `layout.js` ಫೈಲ್

`layout.js` (ಅಥವಾ `layout.jsx`, `layout.ts`, `layout.tsx`) ಫೈಲ್ ಒಂದು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ನೊಳಗಿನ ಅನೇಕ ಪುಟಗಳಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳಲಾದ UI ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಸ್ಥಿರವಾದ ಹೆಡರ್‌ಗಳು, ಫೂಟರ್‌ಗಳು, ಸೈಡ್‌ಬಾರ್‌ಗಳು ಮತ್ತು ಅನೇಕ ಪುಟಗಳಲ್ಲಿ ಇರಬೇಕಾದ ಇತರ ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಲೇಔಟ್‌ಗಳು ಉಪಯುಕ್ತವಾಗಿವೆ.

ಉದಾಹರಣೆ:

ನೀವು `/about` ಪುಟ ಮತ್ತು ಕಾಲ್ಪನಿಕ `/about/team` ಪುಟ ಎರಡಕ್ಕೂ ಹೆಡರ್ ಸೇರಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ನೀವು `app/about` ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ `layout.js` ಫೈಲ್ ಅನ್ನು ರಚಿಸಬಹುದು:

// app/about/layout.js
import React from 'react';

export default function AboutLayout({ children }) {
  return (
    <div>
      <header>
        <h1>ನಮ್ಮ ಕಂಪನಿಯ ಬಗ್ಗೆ</h1>
      </header>
      <main>{children}</main>
    </div>
  );
}

`children` ಪ್ರಾಪ್ ಅನ್ನು ಅದೇ ಡೈರೆಕ್ಟರಿಯಲ್ಲಿ ಅಥವಾ ಯಾವುದೇ ನೆಸ್ಟೆಡ್ ಡೈರೆಕ್ಟರಿಗಳಲ್ಲಿ `page.js` ಫೈಲ್‌ನಿಂದ ರೆಂಡರ್ ಮಾಡಲಾದ UI ಯೊಂದಿಗೆ ಬದಲಾಯಿಸಲಾಗುತ್ತದೆ.

4. `template.js` ಫೈಲ್

`template.js` ಫೈಲ್ `layout.js` ಗೆ ಹೋಲುತ್ತದೆ, ಆದರೆ ಇದು ಪ್ರತಿ ಚೈಲ್ಡ್ ರೂಟ್‌ಗೆ ಕಾಂಪೊನೆಂಟ್‌ನ ಹೊಸ ಇನ್‌ಸ್ಟೆನ್ಸ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ಚೈಲ್ಡ್ ರೂಟ್‌ಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಕಾಂಪೊನೆಂಟ್ ಸ್ಟೇಟ್ ಅನ್ನು ನಿರ್ವಹಿಸಲು ಅಥವಾ ಮರು-ರೆಂಡರ್‌ಗಳನ್ನು ತಡೆಯಲು ನೀವು ಬಯಸುವ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಲೇಔಟ್‌ಗಳಿಗಿಂತ ಭಿನ್ನವಾಗಿ, ಟೆಂಪ್ಲೇಟ್‌ಗಳು ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಮರು-ರೆಂಡರ್ ಆಗುತ್ತವೆ. ನ್ಯಾವಿಗೇಷನ್‌ನಲ್ಲಿ ಅಂಶಗಳನ್ನು ಅನಿಮೇಟ್ ಮಾಡಲು ಟೆಂಪ್ಲೇಟ್‌ಗಳನ್ನು ಬಳಸುವುದು ಉತ್ತಮ.

ಉದಾಹರಣೆ:

// app/template.js
'use client'

import { useState } from 'react'

export default function Template({ children }) {
  const [count, setCount] = useState(0)

  return (
    <main>
      <p>ಟೆಂಪ್ಲೇಟ್: {count}</p>
      <button onClick={() => setCount(count + 1)}>ಟೆಂಪ್ಲೇಟ್ ಅಪ್‌ಡೇಟ್ ಮಾಡಿ</button>
      {children}
    </main>
  )
}

5. `loading.js` ಫೈಲ್

`loading.js` (ಅಥವಾ `loading.jsx`, `loading.ts`, `loading.tsx`) ಫೈಲ್ ಒಂದು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್ ಲೋಡ್ ಆಗುತ್ತಿರುವಾಗ ಪ್ರದರ್ಶಿಸಲಾಗುವ ಲೋಡಿಂಗ್ UI ಅನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಡೇಟಾವನ್ನು ಪಡೆಯುವಾಗ ಅಥವಾ ಇತರ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವಾಗ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ:

// app/about/loading.js
import React from 'react';

export default function Loading() {
  return <p>ನಮ್ಮ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಲೋಡ್ ಮಾಡಲಾಗುತ್ತಿದೆ...</p>;
}

ಬಳಕೆದಾರರು `/about` ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ, `page.js` ಕಾಂಪೊನೆಂಟ್ ಸಂಪೂರ್ಣವಾಗಿ ರೆಂಡರ್ ಆಗುವವರೆಗೆ `Loading` ಕಾಂಪೊನೆಂಟ್ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ.

6. `error.js` ಫೈಲ್

`error.js` (ಅಥವಾ `error.jsx`, `error.ts`, `error.tsx`) ಫೈಲ್ ಒಂದು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ನೊಳಗೆ ದೋಷ ಸಂಭವಿಸಿದಾಗ ಪ್ರದರ್ಶಿಸಲಾಗುವ ಕಸ್ಟಮ್ ದೋಷ UI ಅನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಹೆಚ್ಚು ಬಳಕೆದಾರ-ಸ್ನೇಹಿ ದೋಷ ಸಂದೇಶವನ್ನು ಒದಗಿಸಲು ಮತ್ತು ಸಂಪೂರ್ಣ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ತಡೆಯಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ:

// app/about/error.js
'use client'

import React from 'react';

export default function Error({ error, reset }) {
  return (
    <div>
      <h2>ದೋಷ ಸಂಭವಿಸಿದೆ!</h2>
      <p>{error.message}</p>
      <button onClick={() => reset()}>ಮತ್ತೆ ಪ್ರಯತ್ನಿಸಿ</button>
    </div>
  );
}

`/about` ಪುಟವನ್ನು ರೆಂಡರ್ ಮಾಡುವಾಗ ದೋಷ ಸಂಭವಿಸಿದರೆ, `Error` ಕಾಂಪೊನೆಂಟ್ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. `error` ಪ್ರಾಪ್ ದೋಷದ ಬಗ್ಗೆ ಮಾಹಿತಿಯನ್ನು ಹೊಂದಿರುತ್ತದೆ, ಮತ್ತು `reset` ಫಂಕ್ಷನ್ ಬಳಕೆದಾರರಿಗೆ ಪುಟವನ್ನು ಮರುಲೋಡ್ ಮಾಡಲು ಪ್ರಯತ್ನಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.

7. ರೂಟ್ ಗುಂಪುಗಳು

ರೂಟ್ ಗುಂಪುಗಳು `(groupName)` URL ರಚನೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಸಂಘಟಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಫೋಲ್ಡರ್ ಹೆಸರನ್ನು ಆವರಣಗಳಲ್ಲಿ ಸುತ್ತುವ ಮೂಲಕ ಅವುಗಳನ್ನು ರಚಿಸಲಾಗುತ್ತದೆ. ಲೇಔಟ್‌ಗಳು ಮತ್ತು ಹಂಚಿದ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಸಂಘಟಿಸಲು ಇದು ವಿಶೇಷವಾಗಿ ಸಹಾಯಕವಾಗಿದೆ.

ಉದಾಹರಣೆ:

app/
  (marketing)/
    about/
      page.js
    contact/
      page.js
  (shop)/
    products/
      page.js

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `about` ಮತ್ತು `contact` ಪುಟಗಳನ್ನು `marketing` ಗುಂಪಿನ ಅಡಿಯಲ್ಲಿ ಗುಂಪು ಮಾಡಲಾಗಿದೆ, ಮತ್ತು `products` ಪುಟವು `shop` ಗುಂಪಿನ ಅಡಿಯಲ್ಲಿದೆ. URL ಗಳು ಕ್ರಮವಾಗಿ `/about`, `/contact`, ಮತ್ತು `/products` ಆಗಿ ಉಳಿಯುತ್ತವೆ.

8. ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು

ಡೈನಾಮಿಕ್ ರೂಟ್‌ಗಳು ನಿಮಗೆ ವೇರಿಯಬಲ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳೊಂದಿಗೆ ರೂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಡೇಟಾಬೇಸ್ ಅಥವಾ API ನಿಂದ ಪಡೆದ ಡೇಟಾವನ್ನು ಆಧರಿಸಿ ವಿಷಯವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಡೈನಾಮಿಕ್ ರೂಟ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಸೆಗ್ಮೆಂಟ್ ಹೆಸರನ್ನು ಚೌಕ ಆವರಣಗಳಲ್ಲಿ (ಉದಾ., `[id]`) ಸುತ್ತುವ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಳನ್ನು ಅವುಗಳ ID ಆಧರಿಸಿ ಪ್ರತ್ಯೇಕವಾಗಿ ಪ್ರದರ್ಶಿಸಲು ನೀವು ರೂಟ್ ರಚಿಸಲು ಬಯಸುತ್ತೀರಿ ಎಂದು ಭಾವಿಸೋಣ. ನೀವು ಈ ರೀತಿಯ ಫೈಲ್ ರಚನೆಯನ್ನು ರಚಿಸಬಹುದು:

app/
  blog/
    [id]/
      page.js

`[id]` ಸೆಗ್ಮೆಂಟ್ ಒಂದು ಡೈನಾಮಿಕ್ ಸೆಗ್ಮೆಂಟ್ ಆಗಿದೆ. ಬಳಕೆದಾರರು `/blog/123` ಅಥವಾ `/blog/456` ನಂತಹ URL ಗೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಿದಾಗ `app/blog/[id]/page.js` ನಿಂದ ರಫ್ತು ಮಾಡಲಾದ ಕಾಂಪೊನೆಂಟ್ ರೆಂಡರ್ ಆಗುತ್ತದೆ. `id` ಪ್ಯಾರಾಮೀಟರ್‌ನ ಮೌಲ್ಯವು ಕಾಂಪೊನೆಂಟ್‌ನ `params` ಪ್ರಾಪ್‌ನಲ್ಲಿ ಲಭ್ಯವಿರುತ್ತದೆ.

// app/blog/[id]/page.js
import React from 'react';

export default async function BlogPost({ params }) {
  const { id } = params;

  // ನೀಡಲಾದ ID ಯೊಂದಿಗೆ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ಗಾಗಿ ಡೇಟಾವನ್ನು ಪಡೆದುಕೊಳ್ಳಿ
  const post = await fetchBlogPost(id);

  if (!post) {
    return <p>ಬ್ಲಾಗ್ ಪೋಸ್ಟ್ ಕಂಡುಬಂದಿಲ್ಲ.</p>;
  }

  return (
    <div>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
    </div>
  );
}

async function fetchBlogPost(id) {
  // ಡೇಟಾಬೇಸ್ ಅಥವಾ API ನಿಂದ ಡೇಟಾ ತರುವುದನ್ನು ಅನುಕರಿಸಿ
  return new Promise((resolve) => {
    setTimeout(() => {
      const posts = {
        '123': { title: 'ನನ್ನ ಮೊದಲ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್', content: 'ಇದು ನನ್ನ ಮೊದಲ ಬ್ಲಾಗ್ ಪೋಸ್ಟ್‌ನ ವಿಷಯ.' },
        '456': { title: 'ಮತ್ತೊಂದು ಬ್ಲಾಗ್ ಪೋಸ್ಟ್', content: 'ಇದು ಇನ್ನೂ ಕೆಲವು ರೋಚಕ ವಿಷಯ.' },
      };
      resolve(posts[id] || null);
    }, 500);
  });
}

ನೀವು ಒಂದು ರೂಟ್‌ನಲ್ಲಿ ಬಹು ಡೈನಾಮಿಕ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಸಹ ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ನೀವು `/blog/[category]/[id]` ನಂತಹ ರೂಟ್ ಅನ್ನು ಹೊಂದಿರಬಹುದು.

9. ಕ್ಯಾಚ್-ಆಲ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳು

ಕ್ಯಾಚ್-ಆಲ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳು ನಿಮಗೆ ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸೆಗ್ಮೆಂಟ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುವ ರೂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ಅನುಮತಿಸುತ್ತದೆ. ಬಳಕೆದಾರರಿಂದ URL ರಚನೆಯನ್ನು ನಿರ್ಧರಿಸುವ CMS ರಚಿಸುವಂತಹ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಕ್ಯಾಚ್-ಆಲ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಸೆಗ್ಮೆಂಟ್ ಹೆಸರಿನ ಮೊದಲು ಮೂರು ಚುಕ್ಕೆಗಳನ್ನು (ಉದಾ., `[...slug]`) ಸೇರಿಸುವ ಮೂಲಕ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

app/
  docs/
    [...slug]/
      page.js

`[...slug]` ಸೆಗ್ಮೆಂಟ್ `/docs` ನಂತರದ ಯಾವುದೇ ಸಂಖ್ಯೆಯ ಸೆಗ್ಮೆಂಟ್‌ಗಳಿಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ಇದು `/docs/getting-started`, `/docs/api/users`, ಮತ್ತು `/docs/advanced/configuration` ಗೆ ಹೊಂದಿಕೆಯಾಗುತ್ತದೆ. `slug` ಪ್ಯಾರಾಮೀಟರ್‌ನ ಮೌಲ್ಯವು ಹೊಂದಿಕೆಯಾದ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಒಳಗೊಂಡಿರುವ ಒಂದು ಅರೇ ಆಗಿರುತ್ತದೆ.

// app/docs/[...slug]/page.js
import React from 'react';

export default function DocsPage({ params }) {
  const { slug } = params;

  return (
    <div>
      <h1>ಡಾಕ್ಸ್</h1>
      <p>ಸ್ಲಗ್: {slug ? slug.join('/') : 'ಸ್ಲಗ್ ಇಲ್ಲ'}</p>
    </div>
  );
}

ಐಚ್ಛಿಕ ಕ್ಯಾಚ್-ಆಲ್ ಸೆಗ್ಮೆಂಟ್‌ಗಳನ್ನು ಸೆಗ್ಮೆಂಟ್ ಹೆಸರನ್ನು ಡಬಲ್ ಸ್ಕ್ವೇರ್ ಬ್ರಾಕೆಟ್‌ಗಳಲ್ಲಿ `[[...slug]]` ಸೇರಿಸುವ ಮೂಲಕ ರಚಿಸಬಹುದು. ಇದು ರೂಟ್ ಸೆಗ್ಮೆಂಟ್ ಅನ್ನು ಐಚ್ಛಿಕವಾಗಿಸುತ್ತದೆ. ಉದಾಹರಣೆ:

app/
  blog/
    [[...slug]]/
      page.js

ಈ ಸೆಟಪ್ `/blog` ಮತ್ತು `/blog/any/number/of/segments` ಎರಡರಲ್ಲೂ page.js ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ರೆಂಡರ್ ಮಾಡುತ್ತದೆ.

10. ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳು

ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳು ಒಂದೇ ಲೇಔಟ್‌ನಲ್ಲಿ ಒಂದೇ ಸಮಯದಲ್ಲಿ ಒಂದು ಅಥವಾ ಹೆಚ್ಚಿನ ಪುಟಗಳನ್ನು ರೆಂಡರ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಡ್ಯಾಶ್‌ಬೋರ್ಡ್‌ಗಳಂತಹ ಸಂಕೀರ್ಣ ಲೇಔಟ್‌ಗಳಿಗೆ ಇದು ವಿಶೇಷವಾಗಿ ಉಪಯುಕ್ತವಾಗಿದೆ, ಅಲ್ಲಿ ಪುಟದ ವಿವಿಧ ವಿಭಾಗಗಳನ್ನು ಸ್ವತಂತ್ರವಾಗಿ ಲೋಡ್ ಮಾಡಬಹುದು. ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳನ್ನು `@` ಚಿಹ್ನೆಯ ನಂತರ ಸ್ಲಾಟ್ ಹೆಸರಿನಿಂದ (ಉದಾ., `@sidebar`, `@main`) ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

app/
  @sidebar/
    page.js  // ಸೈಡ್‌ಬಾರ್‌ಗಾಗಿ ವಿಷಯ
  @main/
    page.js  // ಮುಖ್ಯ ವಿಭಾಗಕ್ಕಾಗಿ ವಿಷಯ
  default.js // ಅಗತ್ಯ: ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳಿಗಾಗಿ ಡೀಫಾಲ್ಟ್ ಲೇಔಟ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ

ಪ್ಯಾರಲಲ್ ರೂಟ್‌ಗಳನ್ನು ಬಳಸುವಾಗ `default.js` ಫೈಲ್ ಅಗತ್ಯ. ಇದು ಅಂತಿಮ ಲೇಔಟ್ ಅನ್ನು ರಚಿಸಲು ವಿವಿಧ ಸ್ಲಾಟ್‌ಗಳನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ.

// app/default.js
export default function RootLayout({ children: { sidebar, main } }) {
  return (
    <div style={{ display: 'flex' }}>
      <aside style={{ width: '200px', backgroundColor: '#f0f0f0' }}>
        {sidebar}
      </aside>
      <main style={{ flex: 1, padding: '20px' }}>
        {main}
      </main>
    </div>
  );
}

11. ಇಂಟರ್ಸೆಪ್ಟಿಂಗ್ ರೂಟ್‌ಗಳು

ಇಂಟರ್ಸೆಪ್ಟಿಂಗ್ ರೂಟ್‌ಗಳು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ಬೇರೆ ಭಾಗದಿಂದ ಪ್ರಸ್ತುತ ಲೇಔಟ್‌ನೊಳಗೆ ಒಂದು ರೂಟ್ ಅನ್ನು ಲೋಡ್ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಮಾಡಲ್‌ಗಳು, ಇಮೇಜ್ ಗ್ಯಾಲರಿಗಳು, ಮತ್ತು ಅಸ್ತಿತ್ವದಲ್ಲಿರುವ ಪುಟದ ವಿಷಯದ ಮೇಲೆ ಕಾಣಿಸಿಕೊಳ್ಳಬೇಕಾದ ಇತರ UI ಅಂಶಗಳನ್ನು ರಚಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ. ಇಂಟರ್ಸೆಪ್ಟಿಂಗ್ ರೂಟ್‌ಗಳನ್ನು `(..)` ಸಿಂಟ್ಯಾಕ್ಸ್ ಬಳಸಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ, ಇದು ಇಂಟರ್ಸೆಪ್ಟ್ ಮಾಡಲಾದ ರೂಟ್ ಅನ್ನು ಹುಡುಕಲು ಡೈರೆಕ್ಟರಿ ಟ್ರೀನಲ್ಲಿ ಎಷ್ಟು ಹಂತಗಳವರೆಗೆ ಹೋಗಬೇಕು ಎಂಬುದನ್ನು ಸೂಚಿಸುತ್ತದೆ.

ಉದಾಹರಣೆ:

app/
  (.)photos/
    [id]/
      page.js  // ಇಂಟರ್ಸೆಪ್ಟ್ ಮಾಡಲಾದ ರೂಟ್
  feed/
    page.js  // ಫೋಟೋ ಮಾಡಲ್ ಪ್ರದರ್ಶಿಸುವ ಪುಟ

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, ಬಳಕೆದಾರರು `/feed` ಪುಟದಲ್ಲಿ ಫೋಟೋ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದಾಗ, `app/(.)photos/[id]/page.js` ರೂಟ್ ಅನ್ನು ಇಂಟರ್ಸೆಪ್ಟ್ ಮಾಡಿ `/feed` ಪುಟದ ಮೇಲೆ ಮಾಡಲ್ ಆಗಿ ಪ್ರದರ್ಶಿಸಲಾಗುತ್ತದೆ. `(.)` ಸಿಂಟ್ಯಾಕ್ಸ್ `photos/[id]` ರೂಟ್ ಅನ್ನು ಹುಡುಕಲು ಒಂದು ಹಂತ ಮೇಲಕ್ಕೆ ( `app` ಡೈರೆಕ್ಟರಿಗೆ) ನೋಡಲು Next.js ಗೆ ಹೇಳುತ್ತದೆ.

ಆಪ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಡೇಟಾ ಫೆಚಿಂಗ್

ಆಪ್ ರೂಟರ್ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಮತ್ತು ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ಸ್ ಬಳಸಿ ಡೇಟಾ ಫೆಚಿಂಗ್‌ಗೆ ಅಂತರ್ನಿರ್ಮಿತ ಬೆಂಬಲವನ್ನು ಒದಗಿಸುತ್ತದೆ. ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಸರ್ವರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ, ಆದರೆ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ. ಇದು ಪ್ರತಿಯೊಂದು ಕಾಂಪೊನೆಂಟ್‌ಗೆ ಅದರ ಅವಶ್ಯಕತೆಗಳ ಆಧಾರದ ಮೇಲೆ ಉತ್ತಮ ವಿಧಾನವನ್ನು ಆಯ್ಕೆ ಮಾಡಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್ಸ್

ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಆಪ್ ರೂಟರ್‌ನಲ್ಲಿ ಡೀಫಾಲ್ಟ್ ಆಗಿರುತ್ತವೆ. ಪ್ರತ್ಯೇಕ API ರೂಟ್‌ಗಳ ಅಗತ್ಯವಿಲ್ಲದೆ ನೇರವಾಗಿ ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳಲ್ಲಿ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಅವು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ಇದು ಕಾರ್ಯಕ್ಷಮತೆಯನ್ನು ಸುಧಾರಿಸಬಹುದು ಮತ್ತು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಸರಳಗೊಳಿಸಬಹುದು.

ಉದಾಹರಣೆ:

// app/products/page.js
import React from 'react';

export default async function ProductsPage() {
  const products = await fetchProducts();

  return (
    <div>
      <h1>ಉತ್ಪನ್ನಗಳು</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts() {
  // ಡೇಟಾಬೇಸ್ ಅಥವಾ API ನಿಂದ ಡೇಟಾ ತರುವುದನ್ನು ಅನುಕರಿಸಿ
  return new Promise((resolve) => {
    setTimeout(() => {
      const products = [
        { id: 1, name: 'ಉತ್ಪನ್ನ A' },
        { id: 2, name: 'ಉತ್ಪನ್ನ B' },
        { id: 3, name: 'ಉತ್ಪನ್ನ C' },
      ];
      resolve(products);
    }, 500);
  });
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `fetchProducts` ಫಂಕ್ಷನ್ ಅನ್ನು `ProductsPage` ಕಾಂಪೊನೆಂಟ್‌ನೊಳಗೆ ನೇರವಾಗಿ ಕರೆಯಲಾಗುತ್ತದೆ. ಕಾಂಪೊನೆಂಟ್ ಸರ್ವರ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತದೆ, ಮತ್ತು HTML ಅನ್ನು ಕ್ಲೈಂಟ್‌ಗೆ ಕಳುಹಿಸುವ ಮೊದಲು ಡೇಟಾವನ್ನು ಪಡೆಯಲಾಗುತ್ತದೆ.

ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ಸ್

ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಆಗುತ್ತವೆ ಮತ್ತು ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಸ್ಟೇಟ್ ಮತ್ತು ಬ್ರೌಸರ್ API ಗಳಂತಹ ಕ್ಲೈಂಟ್-ಸೈಡ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತವೆ. ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸಲು, ನೀವು ಫೈಲ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ `'use client'` ಡೈರೆಕ್ಟಿವ್ ಅನ್ನು ಸೇರಿಸಬೇಕಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

// app/counter/page.js
'use client'

import React, { useState } from 'react';

export default function CounterPage() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>ಕೌಂಟರ್</h1>
      <p>ಎಣಿಕೆ: {count}</p>
      <button onClick={() => setCount(count + 1)}>ಹೆಚ್ಚಿಸಿ</button>
    </div>
  );
}

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `CounterPage` ಕಾಂಪೊನೆಂಟ್ ಒಂದು ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್ ಆಗಿದೆ ಏಕೆಂದರೆ ಅದು `useState` ಹುಕ್ ಅನ್ನು ಬಳಸುತ್ತದೆ. `'use client'` ಡೈರೆಕ್ಟಿವ್ ಈ ಕಾಂಪೊನೆಂಟ್ ಅನ್ನು ಕ್ಲೈಂಟ್‌ನಲ್ಲಿ ರೆಂಡರ್ ಮಾಡಲು Next.js ಗೆ ಹೇಳುತ್ತದೆ.

ಸುಧಾರಿತ ರೂಟಿಂಗ್ ತಂತ್ರಗಳು

ಆಪ್ ರೂಟರ್ ಸಂಕೀರ್ಣ ಮತ್ತು ಅತ್ಯಾಧುನಿಕ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಬಳಸಬಹುದಾದ ಹಲವಾರು ಸುಧಾರಿತ ರೂಟಿಂಗ್ ತಂತ್ರಗಳನ್ನು ನೀಡುತ್ತದೆ.

1. ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು

ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳು ನಿಮ್ಮ `app` ಡೈರೆಕ್ಟರಿಯೊಳಗೆ API ಎಂಡ್‌ಪಾಯಿಂಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಪ್ರತ್ಯೇಕ `pages/api` ಡೈರೆಕ್ಟರಿಯ ಅಗತ್ಯವನ್ನು ನಿವಾರಿಸುತ್ತದೆ. ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್‌ಗಳನ್ನು `route.js` (ಅಥವಾ `route.ts`) ಹೆಸರಿನ ಫೈಲ್‌ಗಳಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ ಮತ್ತು ವಿವಿಧ HTTP ವಿಧಾನಗಳನ್ನು (ಉದಾ., `GET`, `POST`, `PUT`, `DELETE`) ನಿರ್ವಹಿಸುವ ಫಂಕ್ಷನ್‌ಗಳನ್ನು ರಫ್ತು ಮಾಡುತ್ತದೆ.

ಉದಾಹರಣೆ:

// app/api/users/route.js
import { NextResponse } from 'next/server'

export async function GET(request) {
  // ಡೇಟಾಬೇಸ್‌ನಿಂದ ಬಳಕೆದಾರರನ್ನು ತರುವುದನ್ನು ಅನುಕರಿಸಿ
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];

  return NextResponse.json(users);
}

export async function POST(request) {
  const body = await request.json()
  console.log('ಡೇಟಾ ಸ್ವೀಕರಿಸಲಾಗಿದೆ:', body)
  return NextResponse.json({ message: 'ಬಳಕೆದಾರರನ್ನು ರಚಿಸಲಾಗಿದೆ' }, { status: 201 })
}

ಈ ಉದಾಹರಣೆಯು `/api/users` ನಲ್ಲಿ `GET` ಮತ್ತು `POST` ವಿನಂತಿಗಳನ್ನು ನಿರ್ವಹಿಸುವ ರೂಟ್ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. `GET` ಫಂಕ್ಷನ್ ಬಳಕೆದಾರರ ಪಟ್ಟಿಯನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತದೆ, ಮತ್ತು `POST` ಫಂಕ್ಷನ್ ಹೊಸ ಬಳಕೆದಾರರನ್ನು ರಚಿಸುತ್ತದೆ.

2. ಬಹು ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ರೂಟ್ ಗುಂಪುಗಳು

ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನ ವಿವಿಧ ವಿಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಲು ನೀವು ರೂಟ್ ಗುಂಪುಗಳನ್ನು ಲೇಔಟ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಬಹುದು. ನಿಮ್ಮ ಸೈಟ್‌ನ ವಿವಿಧ ಭಾಗಗಳಿಗೆ ವಿಭಿನ್ನ ಹೆಡರ್ ಅಥವಾ ಸೈಡ್‌ಬಾರ್ ಹೊಂದಲು ನೀವು ಬಯಸುವ ಸನ್ನಿವೇಶಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಉದಾಹರಣೆ:

app/
  (marketing)/
    layout.js  // ಮಾರ್ಕೆಟಿಂಗ್ ಲೇಔಟ್
    about/
      page.js
    contact/
      page.js
  (admin)/
    layout.js  // ಅಡ್ಮಿನ್ ಲೇಔಟ್
    dashboard/
      page.js

ಈ ಉದಾಹರಣೆಯಲ್ಲಿ, `about` ಮತ್ತು `contact` ಪುಟಗಳು `marketing` ಲೇಔಟ್ ಅನ್ನು ಬಳಸುತ್ತವೆ, ಆದರೆ `dashboard` ಪುಟವು `admin` ಲೇಔಟ್ ಅನ್ನು ಬಳಸುತ್ತದೆ.

3. ಮಿಡಲ್‌ವೇರ್

ವಿನಂತಿಯನ್ನು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ನಿಂದ ನಿರ್ವಹಿಸುವ ಮೊದಲು ಕೋಡ್ ಅನ್ನು ಚಲಾಯಿಸಲು ಮಿಡಲ್‌ವೇರ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ದೃಢೀಕರಣ, ಅಧಿಕಾರ, ಲಾಗಿಂಗ್ ಮತ್ತು ಬಳಕೆದಾರರನ್ನು ಅವರ ಸ್ಥಳ ಅಥವಾ ಸಾಧನದ ಆಧಾರದ ಮೇಲೆ ಮರುನಿರ್ದೇಶಿಸುವಂತಹ ಕಾರ್ಯಗಳಿಗೆ ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.

ಮಿಡಲ್‌ವೇರ್ ಅನ್ನು ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್‌ನ ಮೂಲದಲ್ಲಿ `middleware.js` (ಅಥವಾ `middleware.ts`) ಹೆಸರಿನ ಫೈಲ್‌ನಲ್ಲಿ ವ್ಯಾಖ್ಯಾನಿಸಲಾಗುತ್ತದೆ.

ಉದಾಹರಣೆ:

// middleware.js
import { NextResponse } from 'next/server'

export function middleware(request) {
  // ಬಳಕೆದಾರರು ದೃಢೀಕರಿಸಲ್ಪಟ್ಟಿದ್ದಾರೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸಿ
  const isAuthenticated = false; // ನಿಮ್ಮ ದೃಢೀಕರಣ ತರ್ಕದೊಂದಿಗೆ ಬದಲಾಯಿಸಿ

  if (!isAuthenticated && request.nextUrl.pathname.startsWith('/admin')) {
    return NextResponse.redirect(new URL('/login', request.url));
  }

  return NextResponse.next();
}

// ಇನ್ನಷ್ಟು ತಿಳಿಯಲು ಕೆಳಗಿನ "ಹೊಂದಾಣಿಕೆಯ ಪಥಗಳು" ನೋಡಿ
export const config = {
  matcher: '/admin/:path*',
}

ಈ ಉದಾಹರಣೆಯು `/admin` ಅಡಿಯಲ್ಲಿ ಯಾವುದೇ ರೂಟ್‌ಗೆ ಪ್ರವೇಶಿಸುವ ಮೊದಲು ಬಳಕೆದಾರರು ದೃಢೀಕರಿಸಲ್ಪಟ್ಟಿದ್ದಾರೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಮಿಡಲ್‌ವೇರ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುತ್ತದೆ. ಬಳಕೆದಾರರು ದೃಢೀಕರಿಸದಿದ್ದರೆ, ಅವರನ್ನು `/login` ಪುಟಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸಲಾಗುತ್ತದೆ.

ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್‌ಗಾಗಿ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು

ಆಪ್ ರೂಟರ್‌ನ ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಯಿಂದ ಹೆಚ್ಚಿನದನ್ನು ಪಡೆಯಲು, ಕೆಳಗಿನ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಪರಿಗಣಿಸಿ:

• ನಿಮ್ಮ ಫೈಲ್ ರಚನೆಯನ್ನು ಸಂಘಟಿತವಾಗಿಡಿ: ಅರ್ಥಪೂರ್ಣ ಫೋಲ್ಡರ್ ಹೆಸರುಗಳನ್ನು ಬಳಸಿ ಮತ್ತು ಸಂಬಂಧಿತ ಫೈಲ್‌ಗಳನ್ನು ಒಟ್ಟಿಗೆ ಗುಂಪು ಮಾಡಿ.
• ಹಂಚಿದ UI ಗಾಗಿ ಲೇಔಟ್‌ಗಳನ್ನು ಬಳಸಿ: ಹೆಡರ್‌ಗಳು, ಫೂಟರ್‌ಗಳು, ಸೈಡ್‌ಬಾರ್‌ಗಳು ಮತ್ತು ಅನೇಕ ಪುಟಗಳಲ್ಲಿ ಹಂಚಿಕೊಳ್ಳಲಾದ ಇತರ ಅಂಶಗಳಿಗಾಗಿ ಲೇಔಟ್‌ಗಳನ್ನು ರಚಿಸಿ.
• ಲೋಡಿಂಗ್ UI ಗಳನ್ನು ಬಳಸಿ: ಡೇಟಾವನ್ನು ಪಡೆಯುವ ಅಥವಾ ಇತರ ಅಸಿಂಕ್ರೋನಸ್ ಕಾರ್ಯಾಚರಣೆಗಳನ್ನು ನಿರ್ವಹಿಸುವ ರೂಟ್‌ಗಳಿಗಾಗಿ ಲೋಡಿಂಗ್ UI ಗಳನ್ನು ಒದಗಿಸಿ.
• ದೋಷಗಳನ್ನು ಆಕರ್ಷಕವಾಗಿ ನಿರ್ವಹಿಸಿ: ದೋಷಗಳು ಸಂಭವಿಸಿದಾಗ ಉತ್ತಮ ಬಳಕೆದಾರ ಅನುಭವವನ್ನು ಒದಗಿಸಲು ಕಸ್ಟಮ್ ದೋಷ UI ಗಳನ್ನು ರಚಿಸಿ.
• ಸಂಘಟನೆಗಾಗಿ ರೂಟ್ ಗುಂಪುಗಳನ್ನು ಬಳಸಿ: URL ರಚನೆಯ ಮೇಲೆ ಪರಿಣಾಮ ಬೀರದಂತೆ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಸಂಘಟಿಸಲು ರೂಟ್ ಗುಂಪುಗಳನ್ನು ಬಳಸಿ.
• ಕಾರ್ಯಕ್ಷಮತೆಗಾಗಿ ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿಕೊಳ್ಳಿ: ಸರ್ವರ್‌ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಪಡೆಯಲು ಮತ್ತು UI ಅನ್ನು ರೆಂಡರ್ ಮಾಡಲು ಸರ್ವರ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ, ಕಾರ್ಯಕ್ಷಮತೆ ಮತ್ತು SEO ಅನ್ನು ಸುಧಾರಿಸಿ.
• ಅಗತ್ಯವಿದ್ದಾಗ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ: ಈವೆಂಟ್ ಲಿಸನರ್‌ಗಳು, ಸ್ಟೇಟ್ ಮತ್ತು ಬ್ರೌಸರ್ API ಗಳಂತಹ ಕ್ಲೈಂಟ್-ಸೈಡ್ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಬಳಸಬೇಕಾದಾಗ ಕ್ಲೈಂಟ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಬಳಸಿ.

Next.js ಆಪ್ ರೂಟರ್‌ನೊಂದಿಗೆ ಅಂತರರಾಷ್ಟ್ರೀಕರಣದ ಉದಾಹರಣೆಗಳು

Next.js ಆಪ್ ರೂಟರ್ ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ಮೂಲಕ ಅಂತರರಾಷ್ಟ್ರೀಕರಣವನ್ನು (i18n) ಸರಳಗೊಳಿಸುತ್ತದೆ. ನೀವು i18n ಅನ್ನು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ಹೇಗೆ ಕಾರ್ಯಗತಗೊಳಿಸಬಹುದು ಎಂಬುದು ಇಲ್ಲಿದೆ:

1. ಸಬ್-ಪಾತ್ ರೂಟಿಂಗ್

ಸಬ್-ಪಾತ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಲೋಕೇಲ್ ಆಧಾರದ ಮೇಲೆ ನಿಮ್ಮ ರೂಟ್‌ಗಳನ್ನು ಸಂಘಟಿಸಿ. ಉದಾಹರಣೆಗೆ:

app/
  [locale]/
    page.tsx         // ಲೋಕೇಲ್‌ಗಾಗಿ ಮುಖಪುಟ
    about/
      page.tsx     // ಲೋಕೇಲ್‌ಗಾಗಿ ನಮ್ಮ ಬಗ್ಗೆ ಪುಟ

// app/[locale]/page.tsx
import { getTranslations } from './dictionaries';

export default async function HomePage({ params: { locale } }) {
  const t = await getTranslations(locale);
  return (<h1>{t.home.title}</h1>);
}

// dictionaries.js
const dictionaries = {
  en: () => import('./dictionaries/en.json').then((module) => module.default),
  es: () => import('./dictionaries/es.json').then((module) => module.default),
};

export const getTranslations = async (locale) => {
  try {
    return dictionaries[locale]() ?? dictionaries.en();
  } catch (error) {
    console.error(`ಲೋಕೇಲ್ ${locale} ಗಾಗಿ ಅನುವಾದಗಳನ್ನು ಲೋಡ್ ಮಾಡಲು ವಿಫಲವಾಗಿದೆ`, error);
    return dictionaries.en();
  }
};

ಈ ಸೆಟಪ್‌ನಲ್ಲಿ, `[locale]` ಡೈನಾಮಿಕ್ ರೂಟ್ ಸೆಗ್ಮೆಂಟ್ ವಿವಿಧ ಲೋಕೇಲ್‌ಗಳನ್ನು (ಉದಾ., `/en`, `/es`) ನಿರ್ವಹಿಸುತ್ತದೆ. ಅನುವಾದಗಳನ್ನು ಲೋಕೇಲ್ ಆಧಾರದ ಮೇಲೆ ಡೈನಾಮಿಕ್ ಆಗಿ ಲೋಡ್ ಮಾಡಲಾಗುತ್ತದೆ.

2. ಡೊಮೇನ್ ರೂಟಿಂಗ್

ಹೆಚ್ಚು ಸುಧಾರಿತ ವಿಧಾನಕ್ಕಾಗಿ, ನೀವು ಪ್ರತಿ ಲೋಕೇಲ್‌ಗೆ ವಿಭಿನ್ನ ಡೊಮೇನ್‌ಗಳು ಅಥವಾ ಸಬ್‌ಡೊಮೇನ್‌ಗಳನ್ನು ಬಳಸಬಹುದು. ಇದು ಸಾಮಾನ್ಯವಾಗಿ ನಿಮ್ಮ ಹೋಸ್ಟಿಂಗ್ ಪೂರೈಕೆದಾರರೊಂದಿಗೆ ಹೆಚ್ಚುವರಿ ಕಾನ್ಫಿಗರೇಶನ್ ಅನ್ನು ಒಳಗೊಂಡಿರುತ್ತದೆ.

3. ಲೋಕೇಲ್ ಪತ್ತೆಗಾಗಿ ಮಿಡಲ್‌ವೇರ್

ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಲೋಕೇಲ್ ಅನ್ನು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಪತ್ತೆಹಚ್ಚಲು ಮತ್ತು ಅದಕ್ಕೆ ತಕ್ಕಂತೆ ಅವರನ್ನು ಮರುನಿರ್ದೇಶಿಸಲು ಮಿಡಲ್‌ವೇರ್ ಬಳಸಿ.

// middleware.js
import { NextResponse } from 'next/server';
import { match } from '@formatjs/intl-localematcher';
import Negotiator from 'negotiator';

let locales = ['en', 'es', 'fr'];

function getLocale(request) {
  const negotiatorHeaders = {};
  request.headers.forEach((value, key) => (negotiatorHeaders[key] = value));
  let languages = new Negotiator({ headers: negotiatorHeaders }).languages();

  try {
      return match(languages, locales, 'en'); // "en" ಅನ್ನು ಡೀಫಾಲ್ಟ್ ಲೋಕೇಲ್ ಆಗಿ ಬಳಸಿ
  } catch (error) {
      console.error("ಲೋಕೇಲ್ ಹೊಂದಾಣಿಕೆಯಲ್ಲಿ ದೋಷ:", error);
      return 'en'; // ಹೊಂದಾಣಿಕೆ ವಿಫಲವಾದರೆ ಇಂಗ್ಲಿಷ್‌ಗೆ ಹಿಂತಿರುಗಿ
  }
}

export function middleware(request) {
  const pathname = request.nextUrl.pathname;
  const pathnameIsMissingLocale = locales.every(
    (locale) => !pathname.startsWith(`/${locale}/`) && pathname !== `/${locale}`
  );

  if (pathnameIsMissingLocale) {
    const locale = getLocale(request);

    return NextResponse.redirect(
      new URL(
        `/${locale}${pathname.startsWith('/') ? '' : '/'}${pathname}`,
        request.url
      )
    );
  }
}

export const config = {
  matcher: [
    '/((?!api|_next/static|_next/image|favicon.ico).*)',
  ],
};

ಈ ಮಿಡಲ್‌ವೇರ್ ವಿನಂತಿಸಿದ ಪಥವು ಲೋಕೇಲ್ ಪ್ರಿಫಿಕ್ಸ್ ಹೊಂದಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುತ್ತದೆ. ಇಲ್ಲದಿದ್ದರೆ, ಅದು `Accept-Language` ಹೆಡರ್ ಬಳಸಿ ಬಳಕೆದಾರರ ಆದ್ಯತೆಯ ಲೋಕೇಲ್ ಅನ್ನು ಪತ್ತೆ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅವರನ್ನು ಸೂಕ್ತ ಲೋಕೇಲ್-ನಿರ್ದಿಷ್ಟ ಪಥಕ್ಕೆ ಮರುನಿರ್ದೇಶಿಸುತ್ತದೆ. `@formatjs/intl-localematcher` ಮತ್ತು `negotiator` ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಲೋಕೇಲ್ ಮಾತುಕತೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಬಳಸಲಾಗುತ್ತದೆ.

Next.js ಆಪ್ ರೂಟರ್ ಮತ್ತು ಜಾಗತಿಕ ಪ್ರವೇಶಿಸುವಿಕೆ

ಜಾಗತಿಕವಾಗಿ ಪ್ರವೇಶಿಸಬಹುದಾದ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಪ್ರವೇಶಿಸುವಿಕೆ (a11y) ತತ್ವಗಳ ಬಗ್ಗೆ ಎಚ್ಚರಿಕೆಯ ಪರಿಗಣನೆ ಅಗತ್ಯ. Next.js ಆಪ್ ರೂಟರ್ ಪ್ರವೇಶಿಸಬಹುದಾದ ಅನುಭವಗಳನ್ನು ನಿರ್ಮಿಸಲು ಒಂದು ದೃಢವಾದ ಅಡಿಪಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ, ಆದರೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಎಲ್ಲರಿಗೂ, ಅವರ ಸಾಮರ್ಥ್ಯಗಳನ್ನು ಲೆಕ್ಕಿಸದೆ, ಬಳಸಬಹುದಾಗಿದೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು ಅತ್ಯಗತ್ಯ.

ಪ್ರಮುಖ ಪ್ರವೇಶಿಸುವಿಕೆ ಪರಿಗಣನೆಗಳು

1. ಸಿಮ್ಯಾಂಟಿಕ್ HTML: ನಿಮ್ಮ ವಿಷಯವನ್ನು ರಚಿಸಲು ಸಿಮ್ಯಾಂಟಿಕ್ HTML ಅಂಶಗಳನ್ನು (ಉದಾ., `<article>`, `<nav>`, `<aside>`, `<main>`) ಬಳಸಿ. ಇದು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅರ್ಥವನ್ನು ಒದಗಿಸುತ್ತದೆ ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ಸೈಟ್ ಅನ್ನು ಸುಲಭವಾಗಿ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
2. ARIA ಗುಣಲಕ್ಷಣಗಳು: ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು ಮತ್ತು ವಿಜೆಟ್‌ಗಳ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ARIA (Accessible Rich Internet Applications) ಗುಣಲಕ್ಷಣಗಳನ್ನು ಬಳಸಿ. ARIA ಗುಣಲಕ್ಷಣಗಳು ಸಹಾಯಕ ತಂತ್ರಜ್ಞಾನಗಳಿಗೆ ಅಂಶಗಳ ಪಾತ್ರ, ಸ್ಥಿತಿ ಮತ್ತು ಗುಣಲಕ್ಷಣಗಳ ಬಗ್ಗೆ ಹೆಚ್ಚುವರಿ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸುತ್ತವೆ.
3. ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್: ಎಲ್ಲಾ ಸಂವಾದಾತ್ಮಕ ಅಂಶಗಳು ಕೀಬೋರ್ಡ್ ಮೂಲಕ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಬಳಕೆದಾರರು `Tab` ಕೀಯನ್ನು ಬಳಸಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಮೂಲಕ ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಮತ್ತು `Enter` ಅಥವಾ `Space` ಕೀಯನ್ನು ಬಳಸಿ ಅಂಶಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸಲು ಸಾಧ್ಯವಾಗಬೇಕು.
4. ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್: ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ ಓದುವಿಕೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಪಠ್ಯ ಮತ್ತು ಹಿನ್ನೆಲೆಯ ನಡುವೆ ಸಾಕಷ್ಟು ಬಣ್ಣದ ಕಾಂಟ್ರಾಸ್ಟ್ ಬಳಸಿ. ವೆಬ್ ಕಂಟೆಂಟ್ ಅಕ್ಸೆಸಿಬಿಲಿಟಿ ಗೈಡ್‌ಲೈನ್ಸ್ (WCAG) ಸಾಮಾನ್ಯ ಪಠ್ಯಕ್ಕೆ ಕನಿಷ್ಠ 4.5:1 ಮತ್ತು ದೊಡ್ಡ ಪಠ್ಯಕ್ಕೆ 3:1 ರ ಕಾಂಟ್ರಾಸ್ಟ್ ಅನುಪಾತವನ್ನು ಶಿಫಾರಸು ಮಾಡುತ್ತದೆ.
5. ಚಿತ್ರದ ಆಲ್ಟ್ ಟೆಕ್ಸ್ಟ್: ಎಲ್ಲಾ ಚಿತ್ರಗಳಿಗೆ ವಿವರಣಾತ್ಮಕ ಆಲ್ಟ್ ಟೆಕ್ಸ್ಟ್ ಒದಗಿಸಿ. ಆಲ್ಟ್ ಟೆಕ್ಸ್ಟ್ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಿಂದ ಓದಬಹುದಾದ ಚಿತ್ರಗಳಿಗೆ ಪಠ್ಯ ಪರ್ಯಾಯವನ್ನು ಒದಗಿಸುತ್ತದೆ.
6. ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳು: `<label>` ಅಂಶವನ್ನು ಬಳಸಿ ಫಾರ್ಮ್ ಲೇಬಲ್‌ಗಳನ್ನು ಅವುಗಳ ಅನುಗುಣವಾದ ಇನ್‌ಪುಟ್ ಫೀಲ್ಡ್‌ಗಳೊಂದಿಗೆ ಸಂಯೋಜಿಸಿ. ಇದು ಪ್ರತಿ ಫೀಲ್ಡ್‌ನಲ್ಲಿ ಯಾವ ಮಾಹಿತಿ ನಿರೀಕ್ಷಿಸಲಾಗಿದೆ ಎಂಬುದನ್ನು ಬಳಕೆದಾರರಿಗೆ ಸ್ಪಷ್ಟಪಡಿಸುತ್ತದೆ.
7. ಸ್ಕ್ರೀನ್ ರೀಡರ್ ಪರೀಕ್ಷೆ: ದೃಷ್ಟಿ ದೋಷವಿರುವ ಬಳಕೆದಾರರಿಗೆ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಲು ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ನೊಂದಿಗೆ ಪರೀಕ್ಷಿಸಿ. ಜನಪ್ರಿಯ ಸ್ಕ್ರೀನ್ ರೀಡರ್‌ಗಳಲ್ಲಿ NVDA, JAWS, ಮತ್ತು VoiceOver ಸೇರಿವೆ.

Next.js ಆಪ್ ರೂಟರ್‌ನಲ್ಲಿ ಪ್ರವೇಶಿಸುವಿಕೆಯನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸುವುದು

1. Next.js ಲಿಂಕ್ ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ: ನ್ಯಾವಿಗೇಷನ್‌ಗಾಗಿ `<Link>` ಕಾಂಪೊನೆಂಟ್ ಬಳಸಿ. ಇದು ಪ್ರಿಫೆಚಿಂಗ್ ಮತ್ತು ಫೋಕಸ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್‌ನಂತಹ ಅಂತರ್ನಿರ್ಮಿತ ಪ್ರವೇಶಿಸುವಿಕೆ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ.
2. ಫೋಕಸ್ ಮ್ಯಾನೇಜ್‌ಮೆಂಟ್: ಪುಟಗಳ ನಡುವೆ ನ್ಯಾವಿಗೇಟ್ ಮಾಡುವಾಗ ಅಥವಾ ಮಾಡಲ್‌ಗಳನ್ನು ತೆರೆಯುವಾಗ, ಫೋಕಸ್ ಅನ್ನು ಸರಿಯಾಗಿ ನಿರ್ವಹಿಸಲಾಗಿದೆಯೆ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ಫೋಕಸ್ ಅನ್ನು ಹೊಸ ಪುಟ ಅಥವಾ ಮಾಡಲ್‌ನಲ್ಲಿ ಅತ್ಯಂತ ತಾರ್ಕಿಕ ಅಂಶಕ್ಕೆ ಹೊಂದಿಸಬೇಕು.
3. ಪ್ರವೇಶಿಸಬಹುದಾದ ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳು: ಕಸ್ಟಮ್ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ರಚಿಸುವಾಗ, ಮೇಲೆ ವಿವರಿಸಿದ ತತ್ವಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ ಅವುಗಳು ಪ್ರವೇಶಿಸಬಹುದೆಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನಿಮ್ಮ ಕಾಂಪೊನೆಂಟ್‌ಗಳನ್ನು ಎಲ್ಲರೂ ಬಳಸುವಂತೆ ಮಾಡಲು ಸಿಮ್ಯಾಂಟಿಕ್ HTML, ARIA ಗುಣಲಕ್ಷಣಗಳು ಮತ್ತು ಕೀಬೋರ್ಡ್ ನ್ಯಾವಿಗೇಷನ್ ಬಳಸಿ.
4. ಲಿಂಟಿಂಗ್ ಮತ್ತು ಪರೀಕ್ಷೆ: ನಿಮ್ಮ ಕೋಡ್‌ನಲ್ಲಿ ಸಂಭಾವ್ಯ ಪ್ರವೇಶಿಸುವಿಕೆ ಸಮಸ್ಯೆಗಳನ್ನು ಗುರುತಿಸಲು ಪ್ರವೇಶಿಸುವಿಕೆ ಪ್ಲಗಿನ್‌ಗಳೊಂದಿಗೆ ESLint ನಂತಹ ಲಿಂಟಿಂಗ್ ಸಾಧನಗಳನ್ನು ಬಳಸಿ. ಅಲ್ಲದೆ, ಪ್ರವೇಶಿಸುವಿಕೆ ಉಲ್ಲಂಘನೆಗಳಿಗಾಗಿ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಪರೀಕ್ಷಿಸಲು ಸ್ವಯಂಚಾಲಿತ ಪರೀಕ್ಷಾ ಸಾಧನಗಳನ್ನು ಬಳಸಿ.

ತೀರ್ಮಾನ

Next.js ಆಪ್ ರೂಟರ್‌ನ ಫೈಲ್-ಆಧಾರಿತ ರೂಟಿಂಗ್ ವ್ಯವಸ್ಥೆಯು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಮತ್ತು ನ್ಯಾವಿಗೇಟ್ ಮಾಡಲು ಒಂದು ಶಕ್ತಿಯುತ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ ಮಾರ್ಗವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಿದ ಪ್ರಮುಖ ಪರಿಕಲ್ಪನೆಗಳು ಮತ್ತು ಉತ್ತಮ ಅಭ್ಯಾಸಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವ ಮೂಲಕ, ನೀವು ದೃಢವಾದ, ಸ್ಕೇಲೆಬಲ್ ಮತ್ತು ನಿರ್ವಹಿಸಬಹುದಾದ Next.js ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ನಿರ್ಮಿಸಬಹುದು. ಆಪ್ ರೂಟರ್‌ನ ವಿವಿಧ ವೈಶಿಷ್ಟ್ಯಗಳೊಂದಿಗೆ ಪ್ರಯೋಗ ಮಾಡಿ ಮತ್ತು ಅದು ನಿಮ್ಮ ಅಭಿವೃದ್ಧಿ ಕೆಲಸದ ಹರಿವನ್ನು ಹೇಗೆ ಸರಳಗೊಳಿಸಬಹುದು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಹೇಗೆ ಸುಧಾರಿಸಬಹುದು ಎಂಬುದನ್ನು ಕಂಡುಕೊಳ್ಳಿ.