Brand/Project Name

  • Open /public/text/brand.js
  • Here's bellow the available brand attribute 
    
module.exports = {
  starter: {
    name: 'Luxi Starter',
    desc: 'Luxi Starter - React Starter Template',
    prefix: 'luxi',
    footerText: 'Luxi Theme All Rights Reserved 2019',
    logoText: 'Luxi Theme',
    projectName: 'Starter Project',
    url: 'luxi.ux-maestro.com',
    img: '/public/images/logo.png',
    notifMsg: 'Donec sit amet nulla sed arcu pulvinar ultricies commodo id ligula.'
  }
};
  • Those attribute will affect in HTML ‹head› content and other branding name

Change Layout(RTL) and Theme

theme

This template has 20 Themes with dark/light appearance. And also support for RTL direction. You can change the layout via theme panel but not permanently. To make the layout permanent just follow this step.

  • Open /pages/_app.js
  • Then change the state.theme value. Here's the available api:
    Key Type Available Value Example
    Color: String 'oceanBlue', 'greenLeaf',
    'greyscale', 'cloud',
    'violet', etc     		...appTheme('oceanBlue', themeType),
    Theme mode: String 'light', 'dark', ...appTheme('oceanBlue', 'dark'),
    direction: String ltr, rtl, direction: 'rtl'

    Here's the complete code, for greenLeaf color in dark mode with RTL direction 
    // file: app/redux/modules/uiReducer.js
state = {
  loading: true,
  theme: {
    ...appTheme('greenLeaf', 'dark'),
    direction: 'rtl'
  }
}


Youtube Config

This template us React Youtube a simple react component acting as a thin layer over the YouTube IFrame Player API. To use this feature we recommend to use https in production. If not there will be some warnings in browser console related cookies and security.

You can disable this feature by open /youtube.js then set set use: false.



Set Language

lang

  • To set default language
    1. Open next-i18next.config.js
    2. change defaultLocale: 'en' to other initial locale i.e. defaultLocale: 'id' for Bahasa Indonesia
  • Add new language
    1. By default, next-i18next expects your translations to be organised as such by create new language JSON library in /public/locales/[localCode]/. Please create your language preference here and put every your translation text these JSON files:

      └── public
    └── locales
        ├── en
        |   └── common.json
        └── de
            └── common.json
    2. You can check the available local code here https://www.loc.gov/standards/iso639-2/php/code_list.php
    3. This template uses ISO 639-2 Code, see in second column in table
    4. Then register it in /next-i18next.config.js. Example for English and Deutsch. 
      locales: ['en', 'de']


  • Put the messages to the React Components
    1. Create new page pages/about.js and pages/[locale]/about.js 
      // pages/about.js
// Use for redirection by following language param [locale]. It will redirect to pages/[locale]/about.js

import { Redirect } from '../lib/redirect';
export default Redirect;
                              
                                                            
      // pages/[locale]/about.js
// It's a real page containing translations or components with translations
// You can translate directly in a page with {t('title')}

import React from 'react';
import { useTranslation } from 'next-i18next';
import { getStaticPaths, makeStaticProps } from '../../lib/getStatic';                                

export default function About() {
  const { t } = useTranslation('common');
  return (
    <div>
      <p>This is the about page</p>
      <p>{t('title')}</p>
    </div>
  );
}

const getStaticProps = makeStaticProps(['common']);
export { getStaticPaths, getStaticProps };
    2. Pick one of sample Components with cointaining text
    3. Use translation hook from next-i18next
      
import { useTranslation } from 'next-i18next';
      and use the t function 
      
const { t } = useTranslation('common');
      Basically the message value is String. And next step is replace/add every string in components
    4. Add messages inside components 
                                        
<h3>
  {t('landing-theme:footer_counter')}
<h3>
      Or if you put all translations in common.json 
                                        
<h3>
  {t('footer_counter')}
<h3>
    5. Full code of example component 
      // file: /components/MyComponent/SampleComponent.js

import React from 'react';
import { useTranslation } from 'next-i18next'; 

function SampleComponent(){
  const { t } = useTranslation('common');
  return (
    <h3>
      {t('footer_counter')}
    <h3>
  );
}

export default SampleComponent;
    6. The last step, import the component to page pages/[locale]/about.js 
      // file: /pages/[locale]/about.js
import React from 'react';
import Head from 'next/head';
import { useTranslation } from 'next-i18next';
import { getStaticPaths, makeStaticProps } from '../../lib/getStatic'; 
import SampleComponent from '~/components/MyComponent/SampleComponent.js'

export default function About() {
  const { t } = useTranslation('common');
  return (
    <div>
      <Head>
        <title>
          { brand.crypto.name }
          &nbsp; - Blank page
        </title>
      </Head>
      <p>This is the about page</p>
      <p>{t('title')}</p>
      <SampleComponent />
    </div>
  );
}

const getStaticProps = makeStaticProps(['common']);
export { getStaticPaths, getStaticProps };
    7. Then you can check the result at http://localhost:3000/about or http://localhost:3000/en/about