ਜੇਕਰ ਤੁਸੀਂ Next.js ਨਾਲ ਬਣੇ ਇੱਕ ਆਧੁਨਿਕ ਬਲੌਗ ਸਟਾਰਟਰ ਟੈਂਪਲੇਟ ਦੀ ਭਾਲ ਕਰ ਰਹੇ ਹੋ, ਤਾਂ NextJS ਬੇਸ ਬਲੌਗ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਹੈ। ਇਹ Next.js 15, React 19, TypeScript, ਅਤੇ Tailwind CSS 4 ਨਾਲ ਬਣਿਆ ਇੱਕ ਪੂਰਾ-ਵਿਸ਼ੇਸ਼ਤਾ ਵਾਲਾ ਓਪਨ-ਸੋਰਸ ਬਲੌਗ ਐਪਲੀਕੇਸ਼ਨ ਹੈ ।
ਇਹ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਸਾਫ਼ ਆਰਕੀਟੈਕਚਰ, ਆਧੁਨਿਕ UI components, ਅਤੇ ਇੱਕ ਮੌਕ API ਲੇਅਰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਜੋ ਇਸਨੂੰ ਉਹਨਾਂ ਡਿਵੈਲਪਰਾਂ ਲਈ ਆਦਰਸ਼ ਬਣਾਉਂਦਾ ਹੈ ਜੋ ਬੈਕਐਂਡ ਸੈਟ ਅਪ ਕੀਤੇ ਬਿਨਾਂ ਜਲਦੀ ਇੱਕ ਬਲੌਗ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹਨ।
ਗਿੱਟਹੱਬ ਰਿਪੋਜ਼ਟਰੀ: https://github.com/bfotool/nextjs-base-blog
ਇਹ ਪ੍ਰੋਜੈਕਟ ਖਾਸ ਤੌਰ 'ਤੇ ਇਹਨਾਂ ਲਈ ਲਾਭਦਾਇਕ ਹੈ:
ਡਿਵੈਲਪਰ Next.js ਐਪ ਸਿੱਖ ਰਹੇ ਹਨRouter
ਜਲਦੀ ਨਾਲ ਇੱਕ ਬਲੌਗ ਜਾਂ ਸਮੱਗਰੀ ਵੈੱਬਸਾਈਟ ਬਣਾਉਣਾ
ਇੱਕ Next.js ਬਾਇਲਰਪਲੇਟ ਪ੍ਰੋਜੈਕਟ ਬਣਾਉਣਾ
ਇੱਕ ਅਸਲੀ ਬੈਕਐਂਡ API ਨੂੰ ਕਨੈਕਟ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ UI ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਦਾ ਵਿਕਾਸ ਕਰਨਾ
ਪ੍ਰੋਜੈਕਟ ਦਾ ਸੰਖੇਪ ਜਾਣਕਾਰੀ
NextJS ਬੇਸ ਬਲੌਗ ਨੂੰ ਇੱਕ ਪ੍ਰੋਡਕਸ਼ਨ-ਤਿਆਰ ਬਲੌਗ ਟੈਂਪਲੇਟ ਦੇ ਰੂਪ ਵਿੱਚ ਤਿਆਰ ਕੀਤਾ ਗਿਆ ਹੈ ਜਿਸ ਵਿੱਚ ਆਧੁਨਿਕ ਸਮੱਗਰੀ ਵੈੱਬਸਾਈਟਾਂ ਵਿੱਚ ਪਾਈਆਂ ਜਾਣ ਵਾਲੀਆਂ ਬਹੁਤ ਸਾਰੀਆਂ ਆਮ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਹਨ।
ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
ਫੀਚਰਡ ਪੋਸਟਾਂ ਵਾਲਾ ਹੋਮਪੇਜ
ਬਲੌਗ ਪੋਸਟ ਪੰਨੇ
ਸ਼੍ਰੇਣੀ ਫਿਲਟਰਿੰਗ
ਪੂਰੇ-ਪਾਠ ਦੀ ਖੋਜ
ਪੰਨਾਬੰਦੀ
ਵਿਸ਼ਾ- ਸੂਚੀ
ਸੰਬੰਧਿਤ ਪੋਸਟਾਂ
ਹਨੇਰਾ/ਹਲਕਾ ਥੀਮ
ਇਸ ਪ੍ਰੋਜੈਕਟ ਦੇ ਸਭ ਤੋਂ ਦਿਲਚਸਪ ਹਿੱਸਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਨਕਲੀ API ਲੇਅਰ ਹੈ, ਜੋ ਕਿ Axios ਇੰਟਰਸੈਪਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ REST API ਦੀ ਨਕਲ ਕਰਦਾ ਹੈ । ਇਹ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਬੈਕਐਂਡ ਸਰਵਰ ਦੀ ਲੋੜ ਤੋਂ ਬਿਨਾਂ ਐਪਲੀਕੇਸ਼ਨ ਬਣਾਉਣ ਅਤੇ ਟੈਸਟ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ।
ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਹੋਮਪੇਜ
ਹੋਮਪੇਜ ਕਈ ਮਹੱਤਵਪੂਰਨ ਭਾਗ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਦਾ ਹੈ:
ਫੀਚਰਡ ਹੀਰੋ ਪੋਸਟ
ਸ਼੍ਰੇਣੀ ਫਿਲਟਰ
ਬਲੌਗ ਪੋਸਟਾਂ ਦਾ ਇੱਕ ਗਰਿੱਡ
ਪੰਨਾਬੱਧ ਨੈਵੀਗੇਸ਼ਨ
ਇਹ ਲੇਆਉਟ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਹੈ ਅਤੇ ਡੈਸਕਟੌਪ ਅਤੇ ਮੋਬਾਈਲ ਦੋਵਾਂ ਡਿਵਾਈਸਾਂ ਲਈ ਅਨੁਕੂਲਿਤ ਹੈ।
ਬਲੌਗ ਪੋਸਟ ਪੰਨਾ
ਹਰੇਕ ਲੇਖ ਇੱਕ ਗਤੀਸ਼ੀਲ ਰਸਤੇ ਰਾਹੀਂ ਪਹੁੰਚਯੋਗ ਹੈ:
/blog/[slug]
ਬਲੌਗ ਪੋਸਟ ਪੇਜ ਵਿੱਚ ਕਈ ਉਪਯੋਗੀ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਸ਼ਾਮਲ ਹਨ:
ਪੂਰੀ ਲੇਖ ਸਮੱਗਰੀ
ਸਮੱਗਰੀ ਦੀ ਆਟੋਮੈਟਿਕ ਸਾਰਣੀ
ਪੜ੍ਹਨ ਦਾ ਅਨੁਮਾਨਿਤ ਸਮਾਂ
ਸੋਸ਼ਲ ਸ਼ੇਅਰ ਬਟਨ
ਸੰਬੰਧਿਤ ਪੋਸਟਾਂ ਦੇ ਸੁਝਾਅ
ਇਹ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਆਧੁਨਿਕ ਬਲੌਗਿੰਗ ਪਲੇਟਫਾਰਮਾਂ ਵਾਂਗ ਇੱਕ ਪੇਸ਼ੇਵਰ ਪੜ੍ਹਨ ਦਾ ਅਨੁਭਵ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦੀਆਂ ਹਨ।
ਸ਼੍ਰੇਣੀ ਪੰਨੇ
ਉਪਭੋਗਤਾ ਸ਼੍ਰੇਣੀ ਅਨੁਸਾਰ ਪੋਸਟਾਂ ਨੂੰ ਬ੍ਰਾਊਜ਼ ਕਰ ਸਕਦੇ ਹਨ।
ਉਦਾਹਰਨ ਰੂਟ:
/blog/category/[slug]
ਇਹ ਵਿਸ਼ੇਸ਼ਤਾ ਪਾਠਕਾਂ ਨੂੰ ਖਾਸ ਵਿਸ਼ਿਆਂ ਦੇ ਅੰਦਰ ਸਮੱਗਰੀ ਦੀ ਪੜਚੋਲ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੀ ਹੈ।
ਖੋਜ ਕਾਰਜਕੁਸ਼ਲਤਾ
ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਇੱਕ ਬਿਲਟ-ਇਨ ਖੋਜ ਪੰਨਾ ਸ਼ਾਮਲ ਹੈ:
/search
ਖੋਜ ਸਹਾਇਤਾ:
ਅਸਲ-ਸਮੇਂ ਦੇ ਨਤੀਜੇ
ਗਲਤ ਇਨਪੁੱਟ
ਸਿਰਲੇਖਾਂ, ਅੰਸ਼ਾਂ ਅਤੇ ਟੈਗਾਂ ਵਿੱਚ ਖੋਜ ਕਰਨਾ
ਇਹ ਵਰਤੋਂਯੋਗਤਾ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦਾ ਹੈ ਅਤੇ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਸੰਬੰਧਿਤ ਸਮੱਗਰੀ ਨੂੰ ਜਲਦੀ ਲੱਭਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ।
ਬਾਰੇ ਅਤੇ ਸੰਪਰਕ ਪੰਨੇ
ਇਸ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਵਾਧੂ ਪੰਨੇ ਵੀ ਸ਼ਾਮਲ ਹਨ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਪੇਸ਼ੇਵਰ ਬਲੌਗਾਂ 'ਤੇ ਪਾਏ ਜਾਂਦੇ ਹਨ।
ਪੰਨੇ ਬਾਰੇ
ਇਸ ਬਾਰੇ ਪੰਨਾ ਪੇਸ਼ ਕਰਦਾ ਹੈ:
ਟੀਮ
ਪ੍ਰੋਜੈਕਟ ਦੀ ਕਹਾਣੀ
ਮੂਲ ਮੁੱਲ
ਸੰਪਰਕ ਪੰਨਾ
ਸੰਪਰਕ ਪੰਨੇ ਵਿੱਚ ਇੱਕ ਪੂਰੀ ਤਰ੍ਹਾਂ ਪ੍ਰਮਾਣਿਤ ਫਾਰਮ ਸ਼ਾਮਲ ਹੈ ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
ਫਾਰਮ ਪ੍ਰਮਾਣਿਕਤਾ
ਟੋਸਟ ਸੂਚਨਾਵਾਂ
ਸਫਲਤਾ ਅਤੇ ਗਲਤੀ ਫੀਡਬੈਕ
ਡਾਰਕ ਮੋਡ ਸਪੋਰਟ
ਇਹ ਬਲੌਗ ਡਾਰਕ ਮੋਡ ਅਤੇ ਲਾਈਟ ਮੋਡ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ।
ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
ਆਟੋਮੈਟਿਕ ਸਿਸਟਮ ਥੀਮ ਖੋਜ
ਹੱਥੀਂ ਟੌਗਲ
ਲੋਕਲ ਸਟੋਰੇਜ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਥੀਮ ਸਥਿਰਤਾ
ਨਕਲੀ API ਲੇਅਰ(ਬੈਕਐਂਡ ਤੋਂ ਬਿਨਾਂ ਵਿਕਾਸ)
ਇਸ ਪ੍ਰੋਜੈਕਟ ਦੇ ਸਭ ਤੋਂ ਦਿਲਚਸਪ ਹਿੱਸਿਆਂ ਵਿੱਚੋਂ ਇੱਕ ਇਸਦਾ ਨਕਲੀ API ਸਿਸਟਮ ਹੈ ।
ਇੱਕ ਅਸਲੀ ਸਰਵਰ ਨੂੰ ਕਾਲ ਕਰਨ ਦੀ ਬਜਾਏ, ਐਪਲੀਕੇਸ਼ਨ REST API ਜਵਾਬਾਂ ਦੀ ਨਕਲ ਕਰਨ ਲਈ Axios ਇੰਟਰਸੈਪਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੀ ਹੈ।
ਨਕਲੀ API ਕਿਵੇਂ ਕੰਮ ਕਰਦਾ ਹੈ
ਐਕਸਿਓਸ ਉਦਾਹਰਣ ਇਸ ਵਿੱਚ ਬਣਾਈ ਗਈ ਹੈ:
src/services/api-client.ts
ਜਦੋਂ ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਸਮਰੱਥ ਹੁੰਦਾ ਹੈ:
NEXT_PUBLIC_USE_MOCK_API=true
ਨੈੱਟਵਰਕ ਤੱਕ ਪਹੁੰਚਣ ਤੋਂ ਪਹਿਲਾਂ ਬੇਨਤੀਆਂ ਨੂੰ ਰੋਕਿਆ ਜਾਂਦਾ ਹੈ।
ਨਕਲੀ ਹੈਂਡਲਰ ਯਥਾਰਥਵਾਦੀ ਦੇਰੀ(200-600 ਮਿਲੀਸਕਿੰਟ) ਨਾਲ ਨਕਲੀ ਜਵਾਬ ਵਾਪਸ ਕਰਦੇ ਹਨ।
ਜਵਾਬ ਅਸਲ API ਜਵਾਬਾਂ ਵਾਂਗ ਵਿਵਹਾਰ ਕਰਦੇ ਹਨ।
ਮੌਕ ਡੇਟਾ ਇਸ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ:
src/mocks/
ਸਮੇਤ:
ਨਮੂਨਾ ਪੋਸਟਾਂ
ਲੇਖਕ
ਵਰਗ
ਉਪਲਬਧ API ਅੰਤਮ ਬਿੰਦੂ
ਮੌਕ API ਕਈ ਅੰਤਮ ਬਿੰਦੂਆਂ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ:
| ਢੰਗ | ਅੰਤਮ ਬਿੰਦੂ | ਵੇਰਵਾ |
|---|---|---|
| ਪ੍ਰਾਪਤ ਕਰੋ | /ਪੋਸਟਾਂ | ਪੰਨੇਬੱਧ ਬਲੌਗ ਪੋਸਟਾਂ |
| ਪ੍ਰਾਪਤ ਕਰੋ | /ਪੋਸਟਾਂ/ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ | ਫੀਚਰਡ ਪੋਸਟਾਂ |
| ਪ੍ਰਾਪਤ ਕਰੋ | /ਪੋਸਟਾਂ/:ਸਲੱਗ | ਸਿੰਗਲ ਬਲੌਗ ਪੋਸਟ |
| ਪ੍ਰਾਪਤ ਕਰੋ | /ਸ਼੍ਰੇਣੀਆਂ | ਸ਼੍ਰੇਣੀ ਸੂਚੀ |
| ਪ੍ਰਾਪਤ ਕਰੋ | /ਲੇਖਕ | ਲੇਖਕ ਸੂਚੀ |
| ਪੋਸਟ | /ਸੰਪਰਕ ਕਰੋ | ਸੰਪਰਕ ਫਾਰਮ ਜਮ੍ਹਾਂ ਕਰੋ |
ਤਕਨਾਲੋਜੀ ਸਟੈਕ
ਇਹ ਪ੍ਰੋਜੈਕਟ ਇੱਕ ਆਧੁਨਿਕ ਫਰੰਟਐਂਡ ਸਟੈਕ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ।
| ਪਰਤ | ਤਕਨਾਲੋਜੀ |
|---|---|
| ਫਰੇਮਵਰਕ | ਅੱਗੇ.ਜੇਐਸ 15 |
| UI ਲਾਇਬ੍ਰੇਰੀ | ਪ੍ਰਤੀਕਿਰਿਆ 19 |
| ਭਾਸ਼ਾ | ਟਾਈਪਸਕ੍ਰਿਪਟ |
| ਸਟਾਈਲਿੰਗ | ਟੇਲਵਿੰਡ CSS 4 |
| HTTP ਕਲਾਇੰਟ | ਐਕਸੀਓਸ |
| ਆਈਕਾਨ | ਲੂਸੀਡ ਪ੍ਰਤੀਕਿਰਿਆ |
| ਲਿੰਟਿੰਗ | ਈਐਸਲਿੰਟ |
| ਫਾਰਮੈਟਿੰਗ | ਪ੍ਰਿਟੀਅਰ |
ਇਹ ਸਟੈਕ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ:
ਮਜ਼ਬੂਤ ਕਿਸਮ ਦੀ ਸੁਰੱਖਿਆ
ਰੱਖ-ਰਖਾਅ ਯੋਗ ਆਰਕੀਟੈਕਚਰ
ਆਧੁਨਿਕ ਡਿਵੈਲਪਰ ਅਨੁਭਵ
ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ
ਪ੍ਰੋਜੈਕਟ ਢਾਂਚਾ ਇੱਕ ਸਾਫ਼ ਅਤੇ ਸਕੇਲੇਬਲ ਆਰਕੀਟੈਕਚਰ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ।
src/
├── app/
├── components/
├── services/
├── mocks/
├── contexts/
├── hooks/
├── types/
└── lib/
ਐਪRouter
ਡਾਇਰੈਕਟਰੀ appਵਿੱਚ ਸਾਰੇ ਐਪਲੀਕੇਸ਼ਨ ਰੂਟ ਸ਼ਾਮਲ ਹਨ।
ਉਦਾਹਰਨਾਂ:
app/page.tsx
app/blog/[slug]/page.tsx
app/search/page.tsx
ਇਹ Next.js ਐਪ Routerਆਰਕੀਟੈਕਚਰ ਦੀ ਪਾਲਣਾ ਕਰਦਾ ਹੈ ਜੋ Next.js ਦੇ ਨਵੇਂ ਸੰਸਕਰਣਾਂ ਵਿੱਚ ਪੇਸ਼ ਕੀਤਾ ਗਿਆ ਹੈ।
ਕੰਪੋਨੈਂਟਸ
UI ਨੂੰ componentsਲਾਜ਼ੀਕਲ ਸਮੂਹਾਂ ਵਿੱਚ ਸੰਗਠਿਤ ਕੀਤਾ ਗਿਆ ਹੈ:
components/layout
components/common
components/blog
ਇਹ ਢਾਂਚਾ UI ਕੋਡ ਨੂੰ ਸੰਗਠਿਤ ਅਤੇ ਬਣਾਈ ਰੱਖਣਾ ਆਸਾਨ ਰੱਖਦਾ ਹੈ।
ਸੇਵਾਵਾਂ ਦੀ ਪਰਤ
ਫੋਲਡਰ servicesਵਿੱਚ API-ਸਬੰਧਤ ਤਰਕ ਹੈ:
API ਕਲਾਇੰਟ ਸੰਰਚਨਾ
ਡਾਕ ਸੇਵਾ
ਸ਼੍ਰੇਣੀ ਸੇਵਾ
ਸੰਪਰਕ ਫਾਰਮ ਸੇਵਾ
ਇਹ ਪਰਤ ਡੇਟਾ ਫੈਚਿੰਗ ਲੌਜਿਕ ਨੂੰ UI ਤੋਂcomponents ਵੱਖ ਕਰਦੀ ਹੈ, ਜੋ ਸਕੇਲੇਬਿਲਟੀ ਨੂੰ ਬਿਹਤਰ ਬਣਾਉਂਦੀ ਹੈ।
ਇੰਸਟਾਲੇਸ਼ਨ ਗਾਈਡ
ਲੋੜਾਂ
ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ, ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਕੋਲ ਹੈ:
Node.js 18 ਜਾਂ ਇਸ ਤੋਂ ਬਾਅਦ ਵਾਲਾ
npm, ਧਾਗਾ, ਜਾਂ pnpm
ਰਿਪੋਜ਼ਟਰੀ ਨੂੰ ਕਲੋਨ ਕਰੋ
git clone https://github.com/bfotool/nextjs-base-blog.git
cd nextjs-base-blog
ਨਿਰਭਰਤਾਵਾਂ ਸਥਾਪਤ ਕਰੋ
npm install
ਵਾਤਾਵਰਣ ਵੇਰੀਏਬਲ ਸੰਰਚਿਤ ਕਰੋ
cp .env.example .env
ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ
npm run dev
ਆਪਣਾ ਬ੍ਰਾਊਜ਼ਰ ਖੋਲ੍ਹੋ ਅਤੇ ਇੱਥੇ ਜਾਓ:
http://localhost:3000
ਉਪਲਬਧ ਸਕ੍ਰਿਪਟਾਂ
| ਹੁਕਮ | ਵੇਰਵਾ |
|---|---|
| npm ਰਨ ਡੇਵ | ਡਿਵੈਲਪਮੈਂਟ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ |
| npm ਰਨ ਬਿਲਡ | ਉਤਪਾਦਨ ਬਿਲਡ ਬਣਾਓ |
| npm ਰਨ ਸਟਾਰਟ | ਉਤਪਾਦਨ ਸਰਵਰ ਸ਼ੁਰੂ ਕਰੋ |
| npm ਰਨ ਲਿੰਟ | ESLint ਚਲਾਓ |
| npm ਰਨ ਫਾਰਮੈਟ | ਪ੍ਰੀਟੀਅਰ ਨਾਲ ਕੋਡ ਫਾਰਮੈਟ ਕਰੋ |
| npm ਟਾਈਪ-ਚੈੱਕ ਚਲਾਓ | ਟਾਈਪਸਕ੍ਰਿਪਟ ਜਾਂਚਾਂ ਚਲਾਓ |
ਇੱਕ ਅਸਲੀ API ਤੇ ਸਵਿੱਚ ਕਰਨਾ
ਜੇਕਰ ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਇੱਕ ਅਸਲੀ ਬੈਕਐਂਡ API ਨਾਲ ਜੋੜਨਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਇਹਨਾਂ ਕਦਮਾਂ ਦੀ ਪਾਲਣਾ ਕਰੋ।
ਕਦਮ 1: ਮੌਕ API ਨੂੰ ਅਯੋਗ ਕਰੋ
ਫਾਈਲ ਨੂੰ ਸੋਧੋ .env:
NEXT_PUBLIC_USE_MOCK_API=false
ਕਦਮ 2: API ਬੇਸ URL ਸੈੱਟ ਕਰੋ
NEXT_PUBLIC_API_BASE_URL=https://your-api-server.com
ਕਦਮ 3: ਡੇਟਾ ਕਿਸਮਾਂ ਦਾ ਮੇਲ ਕਰੋ
ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡਾ ਬੈਕਐਂਡ API ਟਾਈਪਸਕ੍ਰਿਪਟ ਪਰਿਭਾਸ਼ਾਵਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦਾ ਡੇਟਾ ਵਾਪਸ ਕਰਦਾ ਹੈ:
src/types/index.ts
ਕੋਈ ਵਾਧੂ ਕੋਡ ਬਦਲਾਅ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।
ਸਮੱਗਰੀ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ
ਨਕਲੀ ਸਮੱਗਰੀ ਨੂੰ ਅੰਦਰ ਸੰਪਾਦਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ:
src/mocks/posts.ts
src/mocks/categories.ts
src/mocks/authors.ts
ਇਹ ਡਿਵੈਲਪਰਾਂ ਨੂੰ ਡੈਮੋ ਸਮੱਗਰੀ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਅਨੁਕੂਲਿਤ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ।
ਥੀਮ ਅਤੇ UI ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰਨਾ
ਗਲੋਬਲ ਸਟਾਈਲਿੰਗ ਇਹਨਾਂ ਵਿੱਚ ਮਿਲ ਸਕਦੀ ਹੈ:
src/app/globals.css
ਇਹ ਪ੍ਰੋਜੈਕਟ ਹੇਠ ਲਿਖੇ ਫੌਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ:
ਡੀਐਮ ਸੈਨਸ
ਜੈੱਟਬ੍ਰੇਨਜ਼ ਮੋਨੋ
ਤੁਸੀਂ ਆਪਣੀਆਂ ਡਿਜ਼ਾਈਨ ਜ਼ਰੂਰਤਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਸਟਾਈਲ ਨੂੰ ਸੋਧ ਸਕਦੇ ਹੋ ਜਾਂ ਫੌਂਟ ਬਦਲ ਸਕਦੇ ਹੋ।
ਸਿੱਟਾ
NextJS ਬੇਸ ਬਲੌਗ Next.js ਨਾਲ ਬਲੌਗ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਅਤੇ ਆਧੁਨਿਕ ਸ਼ੁਰੂਆਤੀ ਟੈਂਪਲੇਟ ਹੈ।
ਪ੍ਰੋਜੈਕਟ ਦੇ ਮੁੱਖ ਫਾਇਦਿਆਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:
ਆਧੁਨਿਕ ਤਕਨੀਕੀ ਸਟੈਕ
ਸਾਫ਼ ਆਰਕੀਟੈਕਚਰ
ਵਿਕਾਸ ਲਈ ਮੌਕ API
ਰੀਅਲ ਬੈਕਐਂਡ API ਦੇ ਨਾਲ ਆਸਾਨ ਏਕੀਕਰਨ
ਜਵਾਬਦੇਹ UI ਅਤੇ ਆਧੁਨਿਕ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
ਜੇਕਰ ਤੁਸੀਂ Next.js ਨਾਲ ਇੱਕ ਬਲੌਗ, ਡਿਵੈਲਪਰ ਵੈੱਬਸਾਈਟ, ਜਾਂ ਸਮੱਗਰੀ ਪਲੇਟਫਾਰਮ ਬਣਾ ਰਹੇ ਹੋ, ਤਾਂ ਇਹ ਰਿਪੋਜ਼ਟਰੀ ਤੁਹਾਡੇ ਵਿਕਾਸ ਦੇ ਸਮੇਂ ਨੂੰ ਕਾਫ਼ੀ ਬਚਾ ਸਕਦੀ ਹੈ।
ਇੱਥੇ ਸਰੋਤ ਕੋਡ ਦੀ ਪੜਚੋਲ ਕਰੋ: https://github.com/bfotool/nextjs-base-blog