Usar next-i18next & NextAuth.js en la misma aplicación de NextJS

• next-i18next

  26 5,247 7.9 TypeScript

  The easiest way to translate your NextJs apps.

  

2. Instalamos y configuramos next-i18next

• vercel

  479 12,144 9.8 TypeScript

  Develop. Preview. Ship.

  

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 (

Create Next Apptitle> <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'])), }, }; }

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• next-auth

  203 22,158 9.9 TypeScript

  Authentication for the Web.

  

Suggest a related project