USAR NEXT I 18 NEXTとNEXTHOTHスペイン語の誤用について

52708 ワード
typescript tutorial programming nextjs テキストリンク
エヌes miプライマーのチュートリアルでは、ラインテンシブのデエヌesを簡単にラヴィダy AvirarエルTiempoデQueen necesiteの実装のEstas Technologとしてエヌun Mismo proyecto、mを私のコストは、国連POCOの実装に基づいています.
エスパーレ...

1 .クレアモスのNuevo proyecto como徴候


Lo voy a hacer con typescript pero con JavascriptロスPasos息子ロスmismos
npx create-next-app@latest --typescript
escribes el nombre de tu proyecto y esperas a que se instalen la dependencias , lugo ejecutas vscode o tu editor de c des digo en carla ta proyecto
Ahoraエヌラターミナルescribes
npm run dev
Esto iniciarについて

( 2 ) Instamamos Yの設定


<研究ノート>リポジテのリポジトリ
yarn add next-i18next 
# Si usas NPM ejecuta:
npm i --save next-i18next
Ahora Creamos Das Carpetas on Archivos Json by Penar Las traducciones :
└─ public
   └ locales
     ├─en
     | └─ common.json
     └─es
       └─ common.json
クレーム『アン・アーキボ』next-i18next.config.js コンテニートに対するデル・プロイートの存在
module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
  },
};
ルエゴエヌエルArchivonext.config.js <資料>
/** @type {import('next').NextConfig} */
const { i18n } = require("./next-i18next.config");
const nextConfig = {
  reactStrictMode: true,
  i18n,
};

module.exports = nextConfig;
EditammenosエルArchivopages/_app.tsx エウリュクタ・ラ・アパルカッシの胎動について
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

export default appWithTranslation(MyApp);

Agregamos Y Provios Las traducciones


エヌロスArchivospublic/locales/en/common.json Ypublic/locales/es/common.json エステ・マララpublic/locales/en/common.json
{
  "welcome": "Welcome to the world of Next.js!",
  "content": "This is the blog index page"
}
public/locales/en/common.json
{
  "welcome": "Bienvenido al mundo de Next.js!",
  "content": "Esta es la página de inicio del blog"
}
アホラ、エステパソes重要な、パラqueラスtraducciones Funcionen Correctamente、Deeber ser Liladas desde el servidorエヌtodosロス構成要素は、nivelデppages/index.tsx パラPasarラスtraducciones、パラポールラマルカーダtraducci
const { t } = useTranslation('common');
エルArchivoエヌeste caso quedaとして
import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';

const Home: NextPage = () => {
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}
<研究ノート>エビデー・ディオノマによるジーニアスの研究

SI Queremos Provar Manualmente El Caambio de Idioma Hay que Cambiar la ConfigaCiVercel , としてのエルArchivoクイーダ
const path = require('path');

module.exports = {
  i18n: {
    defaultLocale: 'en',
    locales: ['en', 'es'],
    localeDetection: false,
    localePath: path.resolve('./public/locales'), // for deployment on Vercel
  },
};
タミルニのクレアモス『ボルトン・パラシュート』pages/index.tsx クェーダルはAとしてAを表す
import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}
De Esta forma ya tenemos nuestra acplicaci n n Trabajando Perfectamente con Dos idioma basados en la la ta

第4回次のauthについて


Primero Instalamos EL Paqute :
npm i --save next-auth
パラプロップは、シトスデのsitosデprauba usaremos credencialesは、ADDMのは、HAWARES UNA Validaciは、nのsencilla、エルhacerlaデmaneraの修正に依存します.Deshoエソseguimos ...
CreamosアンArchivopages/api/auth/[...nextauth].tsコンテニート
import NextAuth from 'next-auth';
import CredentialsProvider from 'next-auth/providers/credentials';

export default NextAuth({
  providers: [
    CredentialsProvider({
      name: 'credentials',
      credentials: {
        email: {
          label: 'Email',
          type: 'email',
          placeholder: '[email protected]',
        },
        password: {
          label: 'Password',
          type: 'password',
          placeholder: '********',
        },
      },
      async authorize(credentials) {
        if (credentials && credentials.email && credentials.password) {
          if (
            credentials.email === '[email protected]' &&
            credentials.password === 'test'
          ) {
            return {
              email: credentials.email,
              image: 'https://i.pravatar.cc/500',
              name: 'Test User',
            };
          }
        }
        return null;
      },
    }),
  ],
  callbacks: {
    jwt: async ({ token }) => {
      return token;
    },
    session: ({ session, token }) => {
      if (token) {
        session.id = token.id;
      }
      return session;
    },
  },
  secret: 'my-secret',
  jwt: {
    secret: 'my-secret',
    maxAge: 60 * 60 * 24 * 30,
  },
});
ルエゴ・アディタノスpages/index.tsx <研究ノート>パラダイムに関する一考察
import type { NextPage, NextPageContext } from 'next';
import Head from 'next/head';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useRouter } from 'next/router';
import { useSession, signIn, signOut } from 'next-auth/react';

const Home: NextPage = () => {
  const router = useRouter();
  const { pathname, asPath, query } = router;
  const { t } = useTranslation('common');
  const { data: session } = useSession();

  return (
    <div className={styles.container}>
      <Head>
        <title>Create Next App</title>
        <meta name="description" content="Generated by create next app" />
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <main className={styles.main}>
        <h1 className={styles.title}>{t('welcome')}</h1>

        {/* Language Change Button */}
        <button
          type="button"
          onClick={() => {
            router.push({ pathname, query }, asPath, {
              locale: router.locale === 'es' ? 'en' : 'es',
            });
          }}
        >
          {router.locale === 'es' ? 'English' : 'Español'}
        </button>

        {/* Authentication Button */}
        {session ? (
          <>
            <h4>
              {t('welcome')} {JSON.stringify(session.user)}
            </h4>
            <button
              type="button"
              onClick={() => {
                signOut();
              }}
            >
              {t('signOut')}
            </button>
          </>
        ) : (
          <button
            type="button"
            onClick={() => {
              signIn();
            }}
          >
            {t('signIn')}
          </button>
        )}

        <p className={styles.description}>{t('content')}</p>
      </main>

      <footer className={styles.footer}>
        <a
          href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
        >
          Powered by{' '}
          <span className={styles.logo}>
            <Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />
          </span>
        </a>
      </footer>
    </div>
  );
};

export default Home;
import { serverSideTranslations } from 'next-i18next/serverSideTranslations';
import { useTranslation } from 'next-i18next';

export async function getStaticProps({ locale }: NextPageContext) {
  return {
    props: {
      ...(await serverSideTranslations(locale || 'en', ['common'])),
    },
  };
}
Ahora Lo mは、重要な点、SeguramenteラRazは、エヌ柱、y Personalmente Lo que m m s s Me Mepages/_app.tsx パルqueエルSessionProviderは、Choque詐欺elプロバイダーデtraducciを得ます:n
import '../styles/globals.css';
import type { AppProps } from 'next/app';
import { appWithTranslation } from 'next-i18next';
import { SessionProvider } from 'next-auth/react';

function MyApp({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

const AppWithI18n = appWithTranslation(MyApp);

const AppWithAuth = (props: AppProps) => (
  <SessionProvider session={props.pageProps.session}>
    <AppWithI18n {...props} />
  </SessionProvider>
);

export default AppWithAuth;
y y listo!Ahora Podemos Cambiar El Idioma de nuestra P . gina y tener la autenticaci‐en‐a misma aplicaci des n nextjs


エスパー・ハーヴェート・アヤドゥド、SI Tienes Alalga Observvaciは、ドーダd d ' JaエヌLos comentalityパラシュートで降下します.
activityターンオーバーアニメーションmakeSceneTransitionAnimationの効果がない問題の解決方法について
Fragmentは入門から精通したActivityまでFragmentのイベントに応答する③